Bootstrap 3 колонки не заполняют весь контейнер

Я новичок в Bootstrap. В следующем сокращенном коде первая строка не полностью заполняет контейнер, но вторая строка (находящаяся в строке класса) заполняет весь контейнер. Итак, если вы хотите заполнить весь контейнер, вы должны всегда вставлять вещи в "".Bootstrap 3 колонки не заполняют весь контейнер

<div class="container" style="background:#00f"> 
    <!--<div class="row" style="background-color: #2fa4e7">--> 
     <div class="col-xs-2" style="background-color: red"> 
      col 
     </div> 
     <div class="col-xs-2"> 
      col 
     </div> 
     <div class="col-xs-2"> 
      col 
     </div> 
     <div class="col-xs-2"> 
      col 
     </div> 
     <div class="col-xs-2"> 
      col 
     </div> 
     <div class="col-xs-2" style="background-color: red"> 
      col 
     </div> 
    <!--</div>--> 

    <div class="row"> 
     <div class="col-xs-12" style="background-color: red"> 
      col 
     </div> 
    </div> 
</div>

Если добавить следующие строки в CSS, а затем «строка» начинает вести себя как колоннах:

.row { 
    margin-left: 0px; 
    margin-right: 0px; 
}

Я задавался вопросом, почему, другими словами, почему ряд попал отрицательные поля по по умолчанию?

источник

2016-12-21 Behzad Pirvali

Пожалуйста, прочтите [Bootstrap энергосистемой] (https: // getbootstrap.com/css/#grid) – vanburen

Я уже это сделал. он говорит: «... Столбцы создают водосточные желоба (промежутки между содержимым столбца) через отступы. Это заполнение смещается в строках для первого и последнего столбцов с помощью отрицательного поля на .rows ...», но почему? На мой взгляд, первый столбец не нуждается в канаве слева, а последний столбец не нуждается в желобе с правой стороны, верно? –

Вы можете попытаться удалить отступы для всего контейнера:

.container { 
     padding-left: 0px !important; 
     padding-right: 0px !important; 
} 
.container .row { 
     margin-left: 0px !important; 
     margin-right: 0px !important; 
}

Сниппет:

.container { 
 
    padding-left: 0px !important; 
 
    padding-right: 0px !important; 
 
} 
 
.container .row { 
 
    margin-left: 0px !important; 
 
    margin-right: 0px !important; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="container" style="background:#00f"> 
 
    <!--<div class="row" style="background-color: #2fa4e7">--> 
 
    <div class="col-xs-2" style="background-color: red"> 
 
     col 
 
    </div> 
 
    <div class="col-xs-2"> 
 
     col 
 
    </div> 
 
    <div class="col-xs-2"> 
 
     col 
 
    </div> 
 
    <div class="col-xs-2"> 
 
     col 
 
    </div> 
 
    <div class="col-xs-2"> 
 
     col 
 
    </div> 
 
    <div class="col-xs-2" style="background-color: red"> 
 
     col 
 
    </div> 
 
    <!--</div>--> 
 

 
    <div class="row"> 
 
     <div class="col-xs-12" style="background-color: red"> 
 
      col 
 
     </div> 
 
    </div> 
 
</div>

источник

2016-12-21 21:26:08 gaetanoM

Да, правда, но вам не кажется, что, поскольку строка находится внутри контейнера, она должна вести себя как «col-xx-12», верно? но это не так, почему? Другими словами, почему «строка» получает отрицательные поля? Когда я устанавливаю маржу в ноль, тогда она ведет себя как col-xx-12. –

@BehzadPirvali Поля и отступ определяются по умолчанию. Строка и набор из 6 col-xs-2 - это два разных объекта, которые я использую. Вы согласны? – gaetanoM

Извините, я не уверен, могу согласиться. контейнер как коробка, когда вы кладете вещи в коробку, вы ожидаете, что она останется в коробке. Другими словами, поля по умолчанию и заполнение являются хорошими, а «строка» должна нарушать их, имея отрицательный запас, не так ли? –

Bootstrap 3 колонки не заполняют весь контейнер

ответ

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