Удалить пространство желоба только для определенного div

Система сетки Bootstrap по умолчанию использует 12 столбцов, каждый из которых имеет желоб 30px пикселей, как 30px ниже. Водосточные желоба - это пустое пространство между колоннами. Ширина желоба составляет от 20 до 20px 30px. Давайте предположим, что это 30px здесь.

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

Проблема в том, что, если я 360px поле 30px (желоб), оно оставляет 360px (12 * 30px) в конце строки.

Учитывая, что я хочу удалить пространство желоба только для конкретного div. Предположим, что это для div которые находятся в main_content div.

div#main_content div{
  /*
 no gutter for the divs in main_content
 */
}

Как я могу удалить желоб для определенного div не теряя отзывчивость Bootstrap и не оставляя места в конце строки?

Ответ 1

Для Bootstrap 3.0 или более поздней версии см. этот ответ

Мы смотрим только на класс .span1 (один столбец на сетке шириной 12), но вы можете добиться того, чего хотите, удалив левое поле:

.row-fluid [class*="span"] { margin:0 } // line 571 of bootstrap responsive

Затем изменив ширину .row-fluid .span1 равной 100%, деленной на 12 столбцов (8.3333%).

.row-fluid .span1 { width: 8.33334% } // line 632 of bootstrap responsive

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

.row-fluid [class*="NoGutter"] { margin-left:0 }
.row-fluid .span1NoGutter { width: 8.33334% }

<div class="row-fluid show-grid">
    <div class="span1NoGutter">1</div>
</div>

Вы также можете повторить этот шаблон для всех других столбцов:

.row-fluid .span2NoGutter { width:16.66667%; margin-left:0 } // 100% / 6 col
.row-fluid .span4NoGutter { width:25%; margin-left:0 } // 100% / 4 col
.row-fluid .span3NoGutter { width:33.33333%; margin-left:0 } // 100% / 3 col
or
.row-fluid .span4NoGutter { width:25% }
.row-fluid [class*="NoGutter"] { margin-left:0 }

* EDIT (настаивая на использовании сетки по умолчанию)
Если стандартная сетка является требованием, она по умолчанию имеет ширину 940px (классы .container и .span12, то есть); таким образом, в простейших терминах вы бы хотели разделить 940 на 12. Это соответствует 12 контейнерам шириной 78.33333 пикселей.

Итак, строка 339 файла bootstrap.css может быть отредактирована так:

.span1 { width:78.33333px; margin-left:0 }
  or
.span1 { width:8.33334%; margin-left:0 }
// this should render at 78.333396px (78.333396 x 12 = 940.000752)

Ответ 2

Обновление 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>

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

Ответ 3

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

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

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

Демо (jsfiddle)

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

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

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

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

Grid mixins v3 (github)

Ответ 4

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

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

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

Ответ 5

Пример 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

Ответ 6

Интересно...

Удаление желоба в Твиттере Загрузочная сетка по умолчанию, то есть 940px в ширину. И что сетка по умолчанию имеет контейнер шириной 940 пикселей и имеет в ней таблицу стилей bootstrap-responsive.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 без сточных канавок будет оставаться натянутым для ландшафта малых планшетов (800x600). Любой размер, меньший, чем этот, скроет 4 divs и будет располагаться вертикально. Конечно, вам нужно будет настроить его в соответствии с вашими потребностями.

Ответ 7

Простейший способ удаления дополнений и полей - это простой css.

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

Ответ 8

Хорошо Если вы хотите изменить желоб внутри одной строки, но хотите, чтобы те (первый и последний) внутренние divs выравнивались с сеткой, окружающей строку .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 желоба).

Ответ 9

Чтобы добавить к Skelly Bootstrap 3 ответа на не-канавку выше (fooobar.com/info/91630/...)

Добавьте следующее, чтобы предотвратить наличие желобов в строке, содержащей только один столбец (полезно при использовании обертки столбцов: 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;
}