Как сделать так, чтобы div не ломался при изменении размера браузера

Question

Как сделать так, чтобы div не ломался при изменении размера браузера

0

Ребята У меня есть три 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 бок о бок, а еще три графика ниже.

Моя проблема в том, что когда я изменяю размер окна браузера, графики будут находиться друг под другом по вертикали, так как теперь у них есть свой собственный контейнер. Как сделать эти графики, сохранить их бок о бок позиции?

user2881063 25 март 2014, в 08:34

Источник

2

Кажется, вы используете старую версию bootstrap (2.3). вы можете обновить до 3.1?
tjati 25 март 2014, в 07:08
0

разве не "жидкий ряд", который заставляет div'ы падать при повторном наборе размера страницы? Вы должны изменить это. попробуй только "row" вместо "row-liquid"
Tynamo 25 март 2014, в 07:09
0

Нет, удаление жидкости из рядов тоже не сработало.
user2881063 25 март 2014, в 07:16
0

не виджет бс ... нестандартный способ есть: jsfiddle.net/z53V7
NoobEditor 25 март 2014, в 07:40

Показать ещё 2 комментария

Теги:

html

css

2 ответа

Ещё вопросы

Кажется, вы используете старую версию bootstrap (2.3). вы можете обновить до 3.1?
разве не "жидкий ряд", который заставляет div'ы падать при повторном наборе размера страницы? Вы должны изменить это. попробуй только "row" вместо "row-liquid"
Нет, удаление жидкости из рядов тоже не сработало.
не виджет бс ... нестандартный способ есть: jsfiddle.net/z53V7

JayD · Answer 1 · 2014-03-25T06-28-00.000Z

Вы должны поместить их в 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 для начинающих

Moussawi7 · Answer 2 · 2014-03-25T05-58-00.000Z

вы можете сделать следующее:

<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%;
}

Зачем создавать новый класс, если bs3 может обрабатывать его с помощью существующего кода?