Удалить отступы от столбцов в Bootstrap 3

343

Проблема:

Удалите отступы / поля справа и слева от col-md- * в Bootstrap 3.

HTML код:

<div class="col-md-12">
    <h2>OntoExplorer<span style="color:#b92429">.</span></h2>

    <div class="col-md-4">
        <div class="widget">
            <div class="widget-header">
                <h3>Dimensions</h3>
            </div>

            <div class="widget-content" id="">
                <div id='jqxWidget'>
                    <div style="clear:both;margin-bottom:20px;" id="listBoxA"></div>
                    <div style="clear:both;" id="listBoxB"></div>

                </div>
            </div>
        </div>
    </div>

    <div class="col-md-8">
        <div class="widget">
            <div class="widget-header">
                <h3>Results</h3>
            </div>

            <div class="widget-content">
                <div id="map_canvas" style="height: 362px;"></div>
            </div>
        </div>
    </div>

</div>

Желаемый вывод:

В настоящее время этот код добавляет отступ / поле справа и слева от двух столбцов. Мне интересно, что же мне не хватает, чтобы убрать это лишнее пространство по бокам?

Примечание:

Если я удаляю «col-md-4», то оба столбца расширяются до 100%, но я хочу, чтобы они были рядом друг с другом.

css  twitter-bootstrap  html 
— kexxcream
источник
1
Для Bootstrap 4 используйте pl-0 pr-0то есть<div class="col-7 pl-0 pr-0">
— Мухаммед Шахзад
Еще короче, px-0что включает в себя как слева, так и справа.
— Теофил

Ответы:

455

Вы обычно используете, .rowчтобы обернуть два столбца, а не .col-md-12- это столбец, содержащий другой столбец. В конце концов, .rowне имеет дополнительных полей и отступов, col-md-12которые принесет a , а также освобождает место, которое столбец вводит с отрицательными левыми и правыми полями.

<div class="container">
    <div class="row">
        <h2>OntoExplorer<span style="color:#b92429">.</span></h2>

        <div class="col-md-4 nopadding">
            <div class="widget">
                <div class="widget-header">
                    <h3>Dimensions</h3>
                </div>
                <div class="widget-content">
                </div>
            </div>
        </div>

        <div class="col-md-8 nopadding">
            <div class="widget">
                <div class="widget-header">
                    <h3>Results</h3>
                </div>
                <div class="widget-content">
                </div>
            </div>
        </div>
    </div>
</div>

если вы действительно хотите удалить отступы / поля, добавьте класс для фильтрации полей / полей для каждого дочернего столбца.

.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}
— MackieeE
источник
Является ли необходимым добавление .without-padding к классу контейнера? Я бы сказал, что достаточно добавить .nopadding в div .col-md-8 с предоставленным вами кодом CSS.
— Чарльз Ингаллс
59
Я обычно создаю 3 дополнительных класса в своем собственном CSS, а именно, .padding-0который устанавливает левый и правый отступы (только) в 0; .padding-smэто устанавливает отступ для 2px и .padding-mdустанавливает отступ для 5px. Обычный отступ составляет 15px (если не настроен), поэтому этих дополнительных классов достаточно.
— MichaelJTaylor
кстати .row переместил новую строку
— ozanmuyes
6
Обычный отступ настраивается в variables.less @ grid-gutter-width: 30px;
— Владислав Лежнев
6
Есть ли какой-либо предопределенный начальный загрузчик для удаления отступов или создания класса - это единственное решение
— Гаурав Аггарвал
186

Bootstrap 4 добавил .no-guttersкласс .

Bootstrap 3 : я всегда добавляю этот стиль в мой Bootstrap LESS / SASS:

.row-no-padding {
  [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

Тогда в HTML вы можете написать:

<div class="row row-no-padding">

Если вы хотите настроить таргетинг только на дочерние столбцы, вы можете использовать дочерний селектор (спасибо John Wu).

.row-no-padding > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

Вы также можете удалить отступ только для определенных размеров устройства (пример SASS):

/* Small devices (tablets, 768px and up) */
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
  .row-sm-no-padding {
    [class*="col-"] {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  }
}

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

— martinedwards
источник
10
Это простой CSS, кроме вложенности (которая также есть в SASS), поэтому он должен работать так же.
— martinedwards
4
Я предлагаю использовать прямой выбор ребенка, чтобы улучшить производительность. Используйте & >[class*="col-"]вместо этого.
— Джон Ву
3
@JohnWu, который также не позволяет вложенным строкам наследовать стиль, что доставило мне немало хлопот. Спасибо!
— Трой Карлсон
2
Вы действительно должны использовать [class^="col-"], [class*=" col-"] {...}вместо этого, чтобы вы не случайно нацелились на классы, названные, foocol-например. Это будет предназначаться для элементов, которые имеют это имя класса в начале или имеют его как вторичный класс, а не нацеливание, где строка находится как часть имени другого класса.
— Бретт
1
Святой курит! Я просто часами боролся с тем, что я считал ошибкой в ​​окне просмотра iOS, потому что мой iPhone 6 иногда (но не всегда) автоматически увеличивал масштаб на моей веб-странице. После удаления col padding, я думаю, автозум работает правильно! Спасибо!
— Райан
45

Уменьшение только отступов в столбцах не поможет, так как вы увеличите ширину страницы, делая ее неравномерной по отношению к остальной части страницы, скажем, navbar. Вам необходимо в равной степени уменьшить отрицательную маржу по строке. Возьмем МЕНЬШИЙ пример @martinedwards:

.row-no-padding {
  margin-left: 0;
  margin-right: 0;
  [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
— phoeb
источник
Это только проблема, когда ваша строка не находится в контейнере или другом столбце. Отрицательные поля просто компенсируют отступы от этих элементов
— Фред Старк
Мне нужно было, !importantчтобы оба поля
— выполняли
22

Специально для SASS Mixin:

@mixin no-padding($side) {
    @if $side == 'all' {
        .no-padding {
            padding: 0 !important;
        }
    } @else {
        .no-padding-#{$side} {
            padding-#{$side}: 0 !important;
        }
    }
}

@include no-padding("left");
@include no-padding("right");
@include no-padding("top");
@include no-padding("bottom");
@include no-padding("all");

Тогда в HTML вы можете использовать 

.no-padding-left
.no-padding-right
.no-padding-bottom
.no-padding-top
.no-padding - to remove padding from all sides

Конечно, вы можете @include только те объявления, которые вам нужны.

— Виталий Силин
источник
Я пытаюсь использовать этот миксин (спасибо за это) в этой ситуации, и отступы не работают. .banners-home { @include make-row(); .banner-comprar,.banner-pq{ @include no-padding("all"); @include make-xs-column(6); @include make-sm-column(6); @include make-md-column(6); @include make-lg-column(6); } .banner-simulador{ @include no-padding("all"); @include make-xs-column(12); @include make-sm-column(12); @include make-md-column(12); @include make-lg-column(12); } }
— jpcmf80
Я понимаю, что не так. Мне нужно создать еще один миксин для этого решения работает. Кстати, спасибо за
— миксин
Я просто создаю это @mixin nopadding{ padding:0!important; }в моем, _mixin.scss а затем добавляю @include nopadding;к коду выше. :)
— jpcmf80
15

просто добавьте «no-padding», который является встроенным классом в bootstrap 3

— Bhargav
источник
У меня работает при добавлении в столбец. Это следует использовать при использовании вложенных столбцов, чтобы избежать множественного заполнения.
— NicolasBernier
4
Также можно добавить no-gutterкласс к родителю .row.
— ArtBIT
3
@ArtBIT Я думаю, вам нужно кодировать no-guttersв соответствии с v4-alpha.getbootstrap.com/layout/grid/#no-gutters . Это не встроено.
— Caltor
12

Bootstrap 4 имеет собственный класс, чтобы сделать это: добавить класс .no-guttersк родителю.row

— Гийом Готье
источник
10

Другое решение, выполнимое только в том случае, если вы компилируете загрузчик из его источников LESS, состоит в переопределении переменной, которая задает заполнение для столбцов.

Вы найдете переменную в variables.lessфайле: она называется @grid-gutter-width.

Это описано в источниках следующим образом:

//** Padding between columns. Gets divided in half for the left and right.
@grid-gutter-width:         30px;

Установите это в 0, скомпилируйте bootstrap.lessи включите получающийся результат bootstrap.css. Вы сделали. Это может быть альтернативой определению дополнительного правила, если вы уже используете источники начальной загрузки, как я.

— ссылка на сайт
источник
6

Bootstrap 3, начиная с версии 3.4.0 , имеет официальный способ удаления отступов: класс row-no-gutters.

Пример из документации :

<div class="row row-no-gutters">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>
— Сми
источник
3

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

@media (max-width: @screen-sm) {
    [class*="col-"] {
      padding-left: 0;
      padding-right: 0;
    }
    .row {
      margin-left: 0;
      margin-right: 0;
    }
    .container-fluid {
      margin: 0;
      padding: 0;
    }
}
— RLV-дан
источник
3

Удалите интервалы из ч / б столбцов, используя загрузчик 3.7.7 или менее.

.no-gutter - это пользовательский класс, который вы можете добавить в свои ряды DIV.

.no-gutter > [class*='col-'] {
        padding-right:0;
        padding-left:0;
    }
— Супер модель
источник
Это сработало и не требовало LESS или SASS. Я заметил , что я должен был добавить класс контейнера в моем ряду, однако, а также применять этот дополнительный стиль: margin:0 auto;.
— Воломике
Разработчики должны будут понять, что, как только это будет сделано, им нужно создать DIV внутри столбца и применить к нему поле для создания собственных размеров желоба.
— Воломике
2 
<div class="col-md-12">
<h2>OntoExplorer<span style="color:#b92429">.</span></h2>

<div class="col-md-4">
    <div class="widget row">
        <div class="widget-header">
            <h3>Dimensions</h3>
        </div>

        <div class="widget-content" id="">
            <div id='jqxWidget'>
                <div style="clear:both;margin-bottom:20px;" id="listBoxA"></div>
                <div style="clear:both;" id="listBoxB"></div>

            </div>
        </div>
    </div>
</div>

<div class="col-md-8">
    <div class="widget row">
        <div class="widget-header">
            <h3>Results</h3>
        </div>

        <div class="widget-content">
            <div id="map_canvas" style="height: 362px;"></div>
        </div>
    </div>
</div>

Вы можете добавить класс строки в div внутри col-md-4, и отступ строки -15px уравновесит желоб из столбцов. Хорошее объяснение здесь о желобах и строках в Bootstrap 3.

— 1Bladesforhire
источник
2

Я думаю, что проще использовать 

margin:-30px;

переопределить исходное значение, установленное при начальной загрузке.

я пробовал 

margin: 0px -30px 0px -30px;

и это сработало для меня.

— Башир
источник
1

Оберните ваши столбцы в .row и добавьте к этому div класс под названием "no-gutter"

<div class="container">
  <div class="row no-gutter">
    <h2>OntoExplorer<span style="color:#b92429">.</span></h2>

    <div class="col-md-4">
        <div class="widget">
            <div class="widget-header">
                <h3>Dimensions</h3>
            </div>
            <div class="widget-content">
            </div>
        </div>
    </div>

    <div class="col-md-8">
        <div class="widget">
            <div class="widget-header">
                <h3>Results</h3>
            </div>
            <div class="widget-content">
            </div>
        </div>
    </div>
</div>

Затем вставьте ниже содержание в ваш файл CSS

.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;
}
— Chi
источник
1

Удалите / настройте Bootstrap Gutter с помощью ссылки css: http://arnique.net/web-design/58/a-quick-guide-to-changing-bootstraps-gutter-width/

/* remove */
.gutter-0.row {
  margin-right: -0px;
  margin-left: -0px;
}
.gutter-0 > [class^="col-"], .gutter-0 > [class^=" col-"] {
  padding-right: 0px;
  padding-left: 0px;
}

/* customize */
.gutter-6.row {
  margin-right: -3px;
  margin-left: -3px;
}
.gutter-6 > [class^="col-"], .gutter-6 > [class^=" col-"] {
  padding-right: 3px;
  padding-left: 3px;
}
    
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row gutter-6">
  <div class="col-sm-3 col-md-3">
    <div class="thumbnail">
      <img width="100%" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDE3MSAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTU5MzRlYTgxN2QgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMHB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNTkzNGVhODE3ZCI+PHJlY3Qgd2lkdGg9IjE3MSIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI2MSIgeT0iOTQuNSI+MTcxeDE4MDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" alt="">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>more</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
  <div class="col-sm-3 col-md-3">
    <div class="thumbnail">
      <img width="100%" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDE3MSAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTU5MzRlYTgxN2QgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMHB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNTkzNGVhODE3ZCI+PHJlY3Qgd2lkdGg9IjE3MSIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI2MSIgeT0iOTQuNSI+MTcxeDE4MDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" alt="">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>more</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
  <div class="col-sm-3 col-md-3">
    <div class="thumbnail">
      <img width="100%" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDE3MSAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTU5MzRlYTgxN2QgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMHB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNTkzNGVhODE3ZCI+PHJlY3Qgd2lkdGg9IjE3MSIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI2MSIgeT0iOTQuNSI+MTcxeDE4MDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" alt="">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>more</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
  <div class="col-sm-3 col-md-3">
    <div class="thumbnail">
      <img width="100%" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDE3MSAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTU5MzRlYTgxN2QgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMHB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNTkzNGVhODE3ZCI+PHJlY3Qgd2lkdGg9IjE3MSIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI2MSIgeT0iOTQuNSI+MTcxeDE4MDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" alt="">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>more</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>
Развернуть фрагмент

— haryx8
источник
0

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

.margL0 { margin-left:0 !important }

! Важно : это поможет вам удалить поля по умолчанию или перезаписать текущее значение поля

и применить к тому div, из которого вы хотите удалить поле с левой стороны

— Удит Бансал
источник
0 
<style>
.col-md-12{
 padding-left:0px !important;
padding-right:0px !important;
}
.col-md-8{
padding-left:0px !important;
padding-right:0px !important;
}
.col-md-4{
padding-left:0px !important;
padding-right:0px !important;
}
</style>
— Срилакшми
источник
Не могли бы вы дать объяснение с вашим ответом.
— PKirby
предоставьте эти коды до или после тега <head>, чтобы они переопределяли свойства класса на этой странице
— Sreelakshmi
0

Вы можете создавать Less Mixins, используя начальную загрузку для управления полями и отступами ваших столбцов, например,

http://mohandere.work/less-mixins-for-margin-and-padding-with-bootstrap-3/

Использование: 

xs-padding-lr-15px//left right both
xs-padding-l-15px 
xs-padding-r-15px

Точно так же для установки нулевого поля / отступа вы можете использовать,

xs-padding-lr-0px
xs-padding-l-0px
xs-padding-r-0px
— Мохан Дере
источник
Похоже, что на этой связанной странице размещена важная информация. Это не путь ТАК. Поместите необходимую информацию в свой ответ!
— Jogo
Или люди могут просто использовать принятый ответ с 159 голосами против и без голосов, это было здесь в течение двух лет. Или один из нескольких других ответов с более чем десятью ответами. Вам придется больше постараться, чтобы заработать место на этой странице против этого конкурса.
— Том Зыч
0

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

Смотрите живое преобразование этого кода в CSS на sassmeister.com 

@mixin padding($side, $size) {
    $padding-size : 0;
    @if $size == 'xs' { $padding-size : 5px; }
    @else if $size == 's' { $padding-size : 10px; }
    @else if $size == 'm' { $padding-size : 15px; }
    @else if $size == 'l' { $padding-size : 20px; }

    @if $side == 'all' {
        .padding--#{$size} {
            padding: $padding-size !important;
        }
    } @else {
        .padding-#{$side}--#{$size} {
            padding-#{$side}: $padding-size !important;
        }
    }
}

$sides-list: all top right bottom left;
$sizes-list: none xs s m l;
@each $current-side in $sides-list {
  @each $current-size in $sizes-list {
    @include padding($current-side,$current-size);
  }
}

Это затем выводит:

.padding--none {
  padding: 0 !important;
}

.padding--xs {
  padding: 5px !important;
}

.padding--s {
  padding: 10px !important;
}

.padding--m {
  padding: 15px !important;
}

.padding--l {
  padding: 20px !important;
}

.padding-top--none {
  padding-top: 0 !important;
}

.padding-top--xs {
  padding-top: 5px !important;
}

.padding-top--s {
  padding-top: 10px !important;
}

.padding-top--m {
  padding-top: 15px !important;
}

.padding-top--l {
  padding-top: 20px !important;
}

.padding-right--none {
  padding-right: 0 !important;
}

.padding-right--xs {
  padding-right: 5px !important;
}

.padding-right--s {
  padding-right: 10px !important;
}

.padding-right--m {
  padding-right: 15px !important;
}

.padding-right--l {
  padding-right: 20px !important;
}

.padding-bottom--none {
  padding-bottom: 0 !important;
}

.padding-bottom--xs {
  padding-bottom: 5px !important;
}

.padding-bottom--s {
  padding-bottom: 10px !important;
}

.padding-bottom--m {
  padding-bottom: 15px !important;
}

.padding-bottom--l {
  padding-bottom: 20px !important;
}

.padding-left--none {
  padding-left: 0 !important;
}

.padding-left--xs {
  padding-left: 5px !important;
}

.padding-left--s {
  padding-left: 10px !important;
}

.padding-left--m {
  padding-left: 15px !important;
}

.padding-left--l {
  padding-left: 20px !important;
}
— Адриен Бе
источник
0

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

<div class="col-md-3 NoPaddingForChildren">
        <div class="col-md-6">
                    <label>Id</label>
                    <input ng-model="ID" class="form-control">
        </div>
        <div class="col-md-6">
                    <label>Value</label>
                    <input ng-model="Val" class="form-control">
        </div>
</div>

и соответствующий класс:

.NoPaddingForChildren > div:not(:first-child):not(:last-child) {
    padding-left: 0;
    padding-right: 0;
}

.NoPaddingForChildren > div:first-child {
    padding-left: 0;
}

.NoPaddingForChildren > div:last-child {    
    padding-right: 0;
}
— Махеш
источник
0

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

— TheCrazyProfessor
источник
0

Вы можете настроить свою систему Bootstrap Grid и определить свою собственную адаптивную сетку.

изменить значения по умолчанию для следующей ширины желоба от @grid-gutter-width = 30pxдо@grid-gutter-width = 0px

(Ширина водосточного желоба дополняет столбцы. Она делится пополам для левого и правого каналов.)

— Рафик Ислам
источник
0

Я по-прежнему предпочитаю контролировать каждый отступ на экране любого размера, так что эта CSS может быть полезной для вас, ребята :)

.nopadding-lg {
    padding-left: 0!important;
    padding-right: 0!important;
}
.nopadding-left-lg {padding-left: 0!important;}
.nopadding-right-lg {padding-right: 0!important;}

@media (max-width: 576px) {
    .nopadding-xs {
        padding-left: 0!important;
        padding-right: 0!important;
    }
    .nopadding-left-xs {padding-left: 0!important;}
    .nopadding-right-xs {padding-right: 0!important;}
}

@media (max-width: 768px) {
    .nopadding-sm {
        padding-left: 0!important;
        padding-right: 0!important;
    }
    .nopadding-left-sm {padding-left: 0!important;}
    .nopadding-right-sm {padding-right: 0!important;}
}
@media (max-width: 992px) {
    .nopadding-md {
        padding-left: 0!important;
        padding-right: 0!important;
    }
    .nopadding-left-md {padding-left: 0!important;}
    .nopadding-right-md {padding-right: 0!important;}
}
— Эрик Врубель
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.