Отображается полная полоса прокрутки списка-списка - горизонтальная полоса прокрутки

Question

Я хотел сделать полную ширину контейнера list-group с несколькими столбцами (Bootstrap 3.2.0). Я создал следующий код:

<div class="container" style="background: red;"> 
    <div class="row"> 
    <div class="list-group"> 
     <div class="row"> 
     <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> 
     <a href="" class="list-group-item">item1</a> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> 
     <a href="" class="list-group-item">item2</a> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> 
     <a href="" class="list-group-item">item3</a> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> 
     <a href="" class="list-group-item">item4</a> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> 
     <a href="" class="list-group-item">item5</a> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> 
     <a href="" class="list-group-item">item6</a> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> 
     <a href="" class="list-group-item">item7</a> 
     </div> 
     </div> 
    </div> 
    </div> 

<p class="row alert alert-warning text-center"> 
message here 
</p> 
</div> 

Demo on Bootply

Единственная проблема в том, что при изменении размера окна браузера, для меньшего разрешения (вероятно, см) горизонтальная полоса прокрутки появляется, вероятно, из-за правого края или правый обивка. Кажется, он, вероятно, связан с использованием row здесь.

Когда я удаляю внешний .row div, нет проблем (горизонтальная полоса прокрутки не отображается - Bootply demo), но в этом случае list-group не займет полную ширину контейнера.

Вопрос - можно ли решить его простым способом? Почему это происходит? Я знаю, что это может быть не очень стандартное решение (я поставил много дополнительных div внутри list-group), но, если возможно, я хотел бы заставить его работать.

Answer 1

Проблема заключается в том, что вам не хватает класса col-*. Bootstrap требует, чтобы вложенные строки нуждались в столбцах внутри них в качестве непосредственного ребенка, но ваша иерархия прошла container ->row ->row ->col-*. Поэтому вам просто нужно вставить col-xs-12 в середине или, проще говоря, добавить этот класс в свой list-group div.

<div class="container" style="background: red;"> 
    <div class="row"> 
    <div class="col-xs-12 list-group"> 
     <div class="row"> 
     <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> 
     <a href="" class="list-group-item">item1</a> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> 
     <a href="" class="list-group-item">item2</a> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> 
     <a href="" class="list-group-item">item3</a> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> 
     <a href="" class="list-group-item">item4</a> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> 
     <a href="" class="list-group-item">item5</a> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> 
     <a href="" class="list-group-item">item6</a> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> 
     <a href="" class="list-group-item">item7</a> 
     </div> 
     </div> 
    </div> 
    </div> 

<p class="row alert alert-warning text-center"> 
message here 
</p> 
</div> 

И Bootply здесь: http://www.bootply.com/jIW90o3ZCA

Answer 2

Если вы не хотите какой-либо интервал между списком-групповых элементов, то вам нужно добавить класс список-группы элемента к колонки:

<div class="container" style="background: red;"> 
    <div class="row list-group"> 
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 list-group-item"> 
     <a href="">item1</a> 
    </div> 
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 list-group-item"> 
     <a href="">item1</a> 
    </div> 
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 list-group-item"> 
     <a href="">item1</a> 
    </div> 
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 list-group-item"> 
     <a href="">item1</a> 
    </div> 
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 list-group-item"> 
     <a href="">item1</a> 
    </div> 
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 list-group-item"> 
     <a href="">item1</a> 
    </div> 
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 list-group-item"> 
     <a href="">item1</a> 
    </div> 
    </div> 
</div>