Bootstrap 3 Multi-column внутри одной ul, не плавающей должным образом

Я уже некоторое время сталкивался с такими проблемами в текущем бутстрапе 3. Мне удалось так или иначе исправить их в прошлом, но не знаю, как исправить это на этот раз.

Мне нужно создать два столбца из одного ul, чередуя элементы pull-left и pull-right на элементе списка. Что я делаю неправильно?

http://bootply.com/92446

Ответ 1

Вам следует попробовать использовать Grid Template.

Вот что я использовал для двух компоновки столбцов <ul>

<ul class="list-group row">
     <li class="list-group-item col-xs-6">Row1</li>
     <li class="list-group-item col-xs-6">Row2</li>
     <li class="list-group-item col-xs-6">Row3</li>
     <li class="list-group-item col-xs-6">Row4</li>
     <li class="list-group-item col-xs-6">Row5</li>
</ul>

Это сработало для меня.

Ответ 2

вы слишком много думаете... Взгляните на это [я думаю, что это то, что вы хотели - если не дайте мне знать]

http://www.bootply.com/118886

css

.even{background: red; color:white;}
.odd{background: darkred; color:white;}

HTML

<div class="container">
  <ul class="list-unstyled">
    <li class="col-md-6 odd">Dumby Content</li>
    <li class="col-md-6 odd">Dumby Content</li>
    <li class="col-md-6 even">Dumby Content</li>
    <li class="col-md-6 even">Dumby Content</li>
    <li class="col-md-6 odd">Dumby Content</li>
    <li class="col-md-6 odd">Dumby Content</li>
  </ul>
</div>

Ответ 3

Спасибо, Varun Rathore. Он отлично работает!

Для тех, кто хочет изящного коллапса из 4 элементов в строке до 2 элементов в строке в зависимости от ширины экрана:

<ul class="list-group row">
    <li class="list-group-item col-xs-6 col-sm-4 col-md-3">Cell_1</li>
    <li class="list-group-item col-xs-6 col-sm-4 col-md-3">Cell_2</li>
    <li class="list-group-item col-xs-6 col-sm-4 col-md-3">Cell_3</li>
    <li class="list-group-item col-xs-6 col-sm-4 col-md-3">Cell_4</li>
    <li class="list-group-item col-xs-6 col-sm-4 col-md-3">Cell_5</li>
    <li class="list-group-item col-xs-6 col-sm-4 col-md-3">Cell_6</li>
    <li class="list-group-item col-xs-6 col-sm-4 col-md-3">Cell_7</li>
</ul>