Ребята У меня есть три divs
в этой настройке: я не уверен, что вы знакомы с этим бутстрапом css, но я должен попробовать:
<div class="row-fluid">
<div class="span4"> A graph here </div>
<div class="span4"> A graph here </div>
<div class="span4"> A graph here </div>
</div>
<div class="row-fluid">
<div class="span4"> Another graph here </div>
<div class="span4"> Another graph here </div>
<div class="span4"> Another graph here </div>
</div>
span4 сделает три divs подходящим для всей страницы пропорционально. Таким образом, позиция состоит из трех графиков, которые будут располагать друг друга в верхнем div бок о бок, а еще три графика ниже.
Моя проблема в том, что когда я изменяю размер окна браузера, графики будут находиться друг под другом по вертикали, так как теперь у них есть свой собственный контейнер. Как сделать эти графики, сохранить их бок о бок позиции?
Вы должны поместить их в divs так же -
<div class="row">
<div class="col-xs-4">
graph1
</div>
<div class="col-xs-4">
graph2
</div>
<div class="col-xs-4">
graph3
</div>
</div>
Каждая строка divs должна содержать до 12, чтобы полностью заполнить эту строку. Где col-X
находится на вашем div class=
представляет, когда ваши divs будут складываться вертикально, а не горизонтально. Поэтому, если у вас есть col-sm-4
ваши divs будут стекаться вертикально на загрузочном "маленьком" разрешении медиа-запроса. Установив их как col-xs-4
каждая строка будет оставаться горизонтальной на малых разрешениях.
Также ознакомьтесь с этими ресурсами. Официальная документация Bootstrap. Пояснение к системной системе BootStrap для начинающих
вы можете сделать следующее:
<div class="row-fluid">
<div class="third"> A graph here </div>
<div class="third"> A graph here </div>
<div class="third"> A graph here </div>
</div>
<div class="row-fluid">
<div class="third"> Another graph here </div>
<div class="third"> Another graph here </div>
<div class="third"> Another graph here </div>
</div>
и css:
.third{
float:left;
width:33.33%;
}