Как удалить пространство желоба для конкретного div только-bootstrap

обновить 2018

на Bootstrap 3, это гораздо проще. Bootstrap 3 теперь использует заполнение вместо полей для создания "желоба".

.row.no-gutter {
  margin-left: 0;
  margin-right: 0;
}

.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
  padding-right: 0;
  padding-left: 0;
}

тогда просто добавьте no-gutter для любых строк, где интервал должен быть удален:

  <div class="row no-gutter">
    <div class="col-lg-1"><div>1</div></div>
    <div class="col-lg-1"><div>1</div></div>
    <div class="col-lg-1"><div>1</div></div>
  </div>

демо: http://bootply.com/107708

Bootstrap 4 (не требуется дополнительный CSS)

Bootstrap 4 включает в себя no-gutters класс, который может быть применен ко всему row:

http://www.codeply.com/go/pVsGQZVVtG

<div class="row no-gutters">
    <div class="col">..</div>
    <div class="col">..</div>
    <div class="col">..</div>
</div>

и интервал utils которые позволяют контролировать заполнение / поля. Таким образом, это может быть использовано для изменения заполнения (желоба) для одного столбца (т. е.: <div class="col-3 pl-0"></div>) наборы padding-left:0; на колонке, или используйте px-0 чтобы удалить как левую, так и правую обивку (ось x).

обновление: ссылка для TWBS 3 getbootstrap.com/customize/#grid-system

---

Twitter Bootstrap предлагает настроить форму чтобы загрузить все или некоторые компоненты с пользовательской конфигурацией.

вы можете использовать эту форму для загрузки сетки без желобов, и она будет реагировать - вам нужен только компонент сетки и отзывчивые относительно ширины.

Demo (jsfiddle)

Если вы немного знаете о меньше, то вы можете включить сгенерированный CSS в селектор по вашему выбору.

/* LESS */
.some-thing {
    /* The custom grid
      ...
    */
}

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

---

Если вы знаете меньше и используете меньше скриптов для управления своими стилями, вы можете использовать непосредственно сетка mixins v2 (github)

сетка mixins v3 (github)

общая ширина рассчитывается с учетом ширины элементов плюс ширина поля пространства. Если вы хотите удалить пространство полей, это нормально, но чтобы избежать этого разрыва, который вы упомянули, вам также нужно увеличить ширину столбцов.

в этом случае вам нужно увеличить ширину одного столбца на его удаленное пространство полей, которое будет 30px.

Итак, предположим, что ширина ваших столбцов составляет 50PX обычно с 30px поля пространства. Удалить граничным пространством и сделайте ширину 80PX.

Пример 4 столбцов span3. Для других Ширин пяди используйте новую ширину = старую ширину + размер сточной канавы. Использовать медиа-запросы, чтобы сделать его отзывчивым.

css:

    <style type="text/css">
    @media (min-width: 1200px) 
    {   
        .nogutter .span3
        {
            margin-left: 0px; width:300px;
        }   
    }
    @media (min-width: 980px) and (max-width: 1199px) 
    { 
        .nogutter .span3
        {
            margin-left: 0px; width:240px;
        }   
    }
    @media (min-width: 768px) and (max-width: 979px) 
    { 
        .nogutter .span3
        {   
            margin-left: 0px; width:186px;
        }   
    }
    </style>

html:

<div class="container">
<div class="row">
  <div class="span3" style="background-color:red;">...</div>
  <div class="span3" style="background-color:red;">...</div>
  <div class="span3" style="background-color:red;">...</div>
  <div class="span3" style="background-color:red;">...</div>
</div>
<br>
<div class="row nogutter">
  <div class="span3" style="background-color:red;">...</div>
  <div class="span3" style="background-color:red;">...</div>
  <div class="span3" style="background-color:red;">...</div>
  <div class="span3" style="background-color:red;">...</div>
</div> 
</div>

обновление: или разделите span12 div на 100 / numberofcolumns % width частей с плавающей левой:

<div class="row">
  <div class="span12">
    <div style="background-color:green;width:25%;float:left;">...</div>
  <div style="background-color:yellow;width:25%;float:left;">...</div>
  <div style="background-color:red;width:25%;float:left;">...</div>
  <div style="background-color:blue;width:25%;float:left;">...</div>
  </div>
</div>  

для обоих решений см.: http://bootply.com/61557

интересные...

удаление желоба в сетке Twitter Bootstrap по умолчанию, то есть шириной 940 пикселей. И что сетка по умолчанию имеет 940px широкий контейнер и имеет bootstrap-отзывчивый.в CSS в таблице стилей.

Если я правильно понял ваш вопрос, вот как я это сделал...

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Stackoverflow Question</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link rel="stylesheet" href="assets/css/bootstrap.css">
    <link rel="stylesheet" href="assets/css/bootstrap-responsive.css">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="assets/js/html5shiv.js"></script>
    <![endif]-->




    <style type="text/css">
        #main_content [class*="span"] {
            margin-left: 0;
            width: 25%;
        }

        @media (min-width: 768px) and (max-width: 979px) {
            #main_content [class*="span"] {
            margin-left: 0;
            width: 25%;
            }
        }


        @media (max-width: 767px) {
            #main_content [class*="span"] {
            margin-left: 0;
            width: 100%;
            }
        }

        @media (max-width: 480px) {
            #main_content [class*="span"] {
            margin-left: 0;
            width: 100%;
            }
        }

        <!-- For Visual Aid Only -->
        .bg1 {
            background-color: #C2C2C2;
        }

        .bg2 {
            background-color: #D2D2D2;
        }
    </style>
  <body>
    <div id="wrap">
        <div class="container">
            <div class="row-fluid">
                <div class="span1 text-center bg1">01</div>
                <div class="span1 text-center bg2">02</div>
                <div class="span1 text-center bg1">03</div>
                <div class="span1 text-center bg2">04</div>
                <div class="span1 text-center bg1">05</div>
                <div class="span1 text-center bg2">06</div>
                <div class="span1 text-center bg1">07</div>
                <div class="span1 text-center bg2">08</div>
                <div class="span1 text-center bg1">09</div>
                <div class="span1 text-center bg2">10</div>
                <div class="span1 text-center bg1">11</div>
                <div class="span1 text-center bg2">12</div>
            </div>



            <div id="main_content">
                <div class="row-fluid">
                    <div class="span3 text-center bg1">1</div>
                    <div class="span3 text-center bg2">2</div>
                    <div class="span3 text-center bg1">3</div>
                    <div class="span3 text-center bg2">4</div>
                </div>
            </div>
        </div><!--/container-->
    </div>
  </body>
</html>

и в результате..

пядь 4 div без сточной канавы останется spanned для малого ландшафта таблетки (800x600). Все размер меньше, чем это будет свернуть 4 ДИВС, и он будет уложен вертикально. Конечно, вам придется настроить его в соответствии с вашими потребностями.

самый простой способ удалить отступы и поля с помощью простого css.

<div class="header" style="margin:0px;padding:0px;">
.....
.....
.....
</div>

хорошо, если вы хотите изменить желоб внутри одной строки, но хотите, чтобы эти (первый и последний) внутренние дивы выровнялись с сеткой, окружающей .no-gutter строка, вы можете скопировать-вставить-объединить большинство ответов в следующий фрагмент:

.row.no-gutter [class*='col-']:first-child:not(:only-child) {
    padding-right: 0;
}
.row.no-gutter [class*='col-']:last-child:not(:only-child) {
    padding-left: 0;
}
.row.no-gutter [class*='col-']:not(:first-child):not(:last-child):not(:only-child) {
    padding-right: 0;
    padding-left: 0;
}

Если вам нравится иметь меньший желоб вместо полного отсутствия, просто измените 0 на то, что вам нравится... (например: 5px для того чтобы получить сточную канаву 10px).

чтобы добавить к Bootstrap Скелли 3 no-gutter ответ выше (https://stackoverflow.com/a/21282059/662883)

добавьте следующее, чтобы предотвратить появление желобов в строке, содержащей только один столбец (полезно при использовании переноса столбцов:http://getbootstrap.com/css/#grid-example-wrapping):

.row.no-gutter [class*='col-']:only-child,
.row.no-gutter [class*='col-']:only-child
{
    padding-right: 0;
    padding-left: 0;
}