Twitter Bootstrap 3 Удаление правого поля и заполнения в строке и col-12

исходный код начальной загрузки -

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

вот почему у вас есть прокладка и полоса прокрутки.

Итак, вы хотите сбросить их в 0px но если это то, что вы хотите только один раз, вы не должны переопределять исходный загрузочный CSS. Затем вы можете позже использовать его с нормальным поведением.

что бы я сделал, чтобы добавить еще один класс, как это:

<div class="row rowWithFullWidth">
    <div class="col-md-12">
        // More HTML code
    </div>
</div>

тогда с этим CSS

.rowWithFullWidth {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

таким образом, вы можете использовать .row С нормальное поведение после.

самый простой способ решить эту проблему-прокомментировать левое и правое заполнение из всех столбцов, установить левое и правое заполнение для класса контейнера в 0 и удалить отрицательное поле из строк.

просто закомментировать .класс строки в строке 691 и в строке 714 прокомментируйте код для левого и правого заполнения класса^= " col -".

это работает для меня:

.container {
     padding-right: 0;
     padding-left: 0; 
     margin-right: auto;
     margin-left: auto;
}

.row {
   /*margin-right: -15px;
    margin-left: -15px;*/
}

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
        position: relative;
        min-height: 1px;
        /*padding-right: 15px;
        padding-left: 15px;*/
}

вам нужно будет перейти в исходный код bootstraps, найти .row селектор и изменение css, связанного С.

Это, наверное, не то, что вы хотите сделать.

вместо этого я бы рекомендовал создать свой собственный селектор для использования для этого типа строки, которую вы хотите. Если бы вы сделали это, вы не могли бы назвать это .row потому что это противоречило бы .row селектор, используемый bootstrap. Вы должны были бы назвать это чем-то вроде .custom-row

Как упоминалось выше, первое, что нужно сделать, это сопоставить контейнер и строка классы:

<div class="container tight">
    <div class="row">
        <div class="col-md-12">
            <!-- html content -->
        </div>
    </div>
</div>

чтобы удалить это дополнение, вы можете использовать css, например:

div.container.tight {
    padding: 0;
}

div.container.tight > .row-fluid {
    padding: 0;
}

я добавил класс жесткий к контейнеру, чтобы ограничить это удаление прокладки только этим одним местом (или любым другим контейнером с жесткий на нем). Выполнение этого глобально может помешать другим вещам, таким как navbars.

вы можете решить эту проблему в Bootstrap 3 на:

1. обертывание строки в div с классом контейнера или контейнера-жидкости и добавление заполнения 0px.
2. скрытие горизонтального переполнения.

пример:

сначала оберните строку в контейнер:

<div class="container">
  <div class="row">
    <div class="col-md-12">
    </div>
  </div>
 </div>

затем добавьте заполнение 0px в свой класс контейнера:

.container {
    padding: 0px;
}

Finish off, скрывая горизонтальную переполнение:

body {
    overflow-x: hidden;
}

та-да!