Twitter Bootstrap 3 Удаление ПРАВИЛЬНОГО поля и отступов на строке и col-12

Ответ 1

Ваша проблема вызвана тем, что НЕ упаковывает ваш .row в класс .container.

Попробуйте следующее:

<div class="container" style="width:100%;background-color:blue;">
<div class="row" style="background-color:green;">
    <div class="col-md-12" style="background-color:red;">
       <div style="background-color:yellow;">test test test</div>
    </div>
</div>
</div>

width:100%; на .container сделает строки 100% (красные). По-прежнему будет дополнением к вашему контенту (желтый). Это дополнение - это желоб сетки, см. fooobar.com/questions/133055/...

Нет, это не помогает. Дополнение справа на col-md-12 все еще преобладает. Я ищу что-то общее, внедренное в .less source для любого столбца type (col - * - 12)!

Все col-*-* имеют прописку 15px с обеих сторон. Нет никакой разницы между классами *-12, кроме как из классов *-12 не осталось поплавка.

css/less для всех ваших классов col-*:

[class^="col-"] {
  padding-left: 0;
  padding-right: 0;
}

css/less для всех классов col-*-12:

[class$="-12"]
{
  padding-left: 0;
  padding-right: 0;
}

Ответ 2

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

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

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

Итак, вы хотите reset их в 0px, но если это то, что вам нужно только один раз, вы не должны переопределять исходный bootstrap 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 с нормальным поведением после.

Ответ 3

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

Просто закомментируйте класс .row в строке 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;*/
}

Ответ 4

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

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

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

Ответ 5

Как уже упоминалось выше, первое, что нужно сделать, это сопоставить классы контейнер и 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.

Ответ 6

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

• Обертка вашей строки в div с классом контейнера или контейнерной жидкостью и добавлением прокладки 0px.
• Скрытие горизонтального переполнения.

Пример:

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

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

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

.container {
    padding: 0px;
}

Завершить, скрыв горизонтальное переполнение:

body {
    overflow-x: hidden;
}

Ta da!