it-swarm.com.ru

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

Проблема:

Удалите отступы/поля справа и слева от 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%, но я хочу, чтобы они были рядом друг с другом.

300
kexxcream

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

<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;
}
413
MackieeE

Я всегда добавляю этот стиль в мой 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;
    }
  }
}

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

165
martinedwards

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

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

Специально для 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 только те объявления, которые вам нужны.

22
Vitaliy Silin

просто добавьте "no-padding" который является встроенным классом в начальной загрузке 3

16
bhargav

В дальнейшем доступно только на Bootstrap4

<div class="p-0 m-0">
</div>

примечание: .p-0 и .m-0 уже добавили bootstrap.css

9
Ali Göksel Bektaş

Другое решение, выполнимое только в том случае, если вы компилируете загрузчик из его 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. Вы сделали. Это может быть альтернативой определению дополнительного правила, если вы уже используете источники начальной загрузки, как я.

9
link

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

7
Guillaume Gautier
[class*="col-"]
  padding: 0
  margin: 0
6
Sharpless512

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

@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;
    }
}
3
rlv-dan

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

margin:-30px;

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

Я пробовал 

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

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

2
Basheer
<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 уравновесит Gutter из столбцов. Хорошее объяснение здесь о желобах и строках в Bootstrap 3.

2
1Bladesforhire

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

<div class="container-fluid">
    <div class="row no-gutters">
        <div class="col-md-12">
            [YOUR CONTENT HERE]
        </div>
    </div>
</div>

Ссылка: http://getbootstrap.com/docs/4.0/layout/grid/#grid-options

1
Kelly Baker

Удалите/настройте 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>

1
haryx8

Оберните ваши столбцы в .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;
}
1
Chi

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

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

.no-Gutter > [class*='col-'] {
        padding-right:0;
        padding-left:0;
    }
1
Super Model

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

0
TheCrazyProfessor

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>
0
Smi

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

.margL0 { margin-left:0 !important }

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

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

0
Udit Bansal

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

Смотрите живое преобразование этого кода в 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
Adrien Be

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

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

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

0
Rafiqul Islam

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

<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
Mahesh
<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>
0
Sreelakshmi

Вы можете создавать 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
0
Mohan Dere

вы можете использовать вилку

https://github.com/srghma/bootstrap-rubygem-without-Gutter/commit/8e42c16dcc2f132af3489c2275dd7460b524d437

gem "bootstrap", github: "srghma/bootstrap-rubygem-without-Gutter"
0
srghma