Бутстрап заказывать столбцы одинаковой ширины вместе

У меня проблема с переупорядочиванием столбцов и укладка их, когда они имеют одинаковую ширину. Это код с моего сайта:Бутстрап заказывать столбцы одинаковой ширины вместе

... 
<div class="row"> 
    <div class="col-md-3 com-sm-4 hidden-xs">col-1 (</div> 
    <div class="col-md-6 com-sm-8">col-2 (main content)</div> 
    <div class="col-md-3 com-sm-4 hidden-xs">col-3</div> 
</div> 
...

Так что я пытаюсь достичь на небольших устройствах, является следующее:

--------- --------- 
| col-1 | | col-2 | 
|  | |  | 
--------- |  | 
| col-3 | |  | 
|  | |  | 
--------- |  | 
      ----------

Но то, что я получил это:

--------- --------- 
| col-1 | | col-2 | 
|  | |  | 
--------- |  | 
      |  | 
      |  | 
      |  | 
--------- --------- 
| col-3 | 
|  | 
---------

Как я могу упорядочить эти два столбца вместе?

источник

2016-04-28 Jose M

Probablu дублируют - http://stackoverflow.com/questions/8470070/how-to-create-grid-tile-view-with-css –

Это потому, что ваши col-1 и col-2 находятся в одном ряду, но col-3 является отдельным. Что вам нужно это:

<div class='row'> 
    <div class='col-xs-6'> 
    <div class='row'> 
     <div class='col-xs-12'> 
     Col-1 
     </div> 
    </div> 
    <div class='row'> 
     <div class='col-xs-12'> 
     Col-3 
     </div> 
    </div> 
    </div> 
    <div class='col-xs-6'> 
    Col-2 
    </div> 
</div>

источник

2016-04-28 12:17:23 RhysO

Предполагая, что кол-2 является более высоким, чем другие, вы можете сделать ..

<div class="row"> 
     <div class="col-md-6 col-md-push-3 col-sm-8 col-sm-push-4"> 
      2 
     </div> 
     <div class="col-md-3 col-md-pull-6 col-sm-4 col-sm-pull-8"> 
      1 
     </div> 
     <div class="col-md-3 col-md-pull-0 col-sm-4 col-sm-pull-8"> 
      3 
     </div> 
</div>

Demo (вариант 1): http://codeply.com/go/E9i34J7QMa

Другой вариант вложенности ..

<div class="row"> 
     <div class="col-md-6 col-md-push-3 col-sm-8 col-sm-push-4"> 
      2 
     </div> 
     <div class="col-md-3 col-md-pull-6 col-sm-4 col-sm-pull-8"> 
      <div class="row"> 
       <div class="col-md-12"> 
        1 
       </div> 
      </div> 
     </div> 
     <div class="col-md-3 col-md-pull-0 col-sm-4 col-sm-pull-8"> 
      <div class="row"> 
       <div class="col-md-12"> 
        3 
       </div> 
      </div> 
     </div> 
</div>

Demo (опция 2): http://codeply.com/go/E9i34J7QMa

источник

2016-04-28 12:19:40 ZimSystem

Это было на самом деле Закрыть! На некоторых страницах col-2 короче, и кажется, что это не работает. Есть рекомендации? –

Я обновил ответ. См. Вариант 2. – ZimSystem

Я тестировал второй вариант, и если col-2 больше, мы сталкиваемся с той же проблемой, что и сейчас. Col-3 будет расположен в конце этой колонки. –

Используйте разделитель строк, чтобы отделить последний, а затем отрегулируйте с помощью классов col. Я верю, что получил то, что вы ищете, правильно here. Если вы нажмете на мобильник, он будет правильно стекаться без пробелов.

Вот код, а также:

<div class="row col-md-8"> 
<div class="col-md-6 col-xs-4 " style="background:lightblue">col-1 (</div> 
<div class="col-md-6 col-xs-8" style="background:green">col-2 (main content)</div> 
</div> 
<div class="row col-md-4"> 
<div class="col-md-12 col-sm-2 col-xs-4" style="background:lightblue">col-3</div> 
</div>

источник

2016-04-28 12:31:01

Бутстрап заказывать столбцы одинаковой ширины вместе

ответ

Смежные вопросы