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

Question

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

297

Проблема:

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

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

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

Примечание:

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

kexxcream 24 окт. 2013, в 11:51

Источник

Теги:

twitter-bootstrap

html

css

24 ответа

156

Я всегда добавляю этот стиль в свой 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 19 май 2014, в 17:35

0

как добавить это в SASS?
Harsha M V 25 июнь 2014, в 17:16
10

Это простой CSS, кроме вложенности (которая также есть в SASS), поэтому он должен работать так же.
martinedwards 15 июль 2014, в 08:28
0

Прекрасно работает в отзывчивой среде.
Karl Stulik 13 нояб. 2015, в 06:41
4

Я предлагаю использовать прямой дочерний селектор для улучшения производительности. Вместо этого используйте & >[class*="col-"] .
John Wu 03 март 2016, в 06:26
0

Это хорошая идея. Затем вы можете более точно указать, какие строки вы не хотите заполнять, что автоматически остановит включение всех потомков. Мое решение состояло только в том, чтобы покрыть случай ОП, где у него есть столбцы, вложенные в столбцы.
martinedwards 07 март 2016, в 08:51
3

@JohnWu, который также не позволяет вложенным строкам наследовать стиль, что доставило мне немало хлопот. Спасибо!
Troy Carlson 28 апр. 2016, в 19:05
2

Вы действительно должны использовать вместо этого [class^="col-"], [class*=" col-"] {...} чтобы вы случайно не нацеливались на классы с именем foocol- например. Это будет предназначаться для элементов, которые имеют это имя класса в начале или имеют его как вторичный класс, а не нацеливание на то, где строка находится как часть имени другого класса.
Brett 15 июнь 2016, в 13:04
1

Святой курит! Я просто часами боролся с тем, что я считал ошибкой в окне просмотра iOS, потому что мой iPhone 6 иногда (но не всегда) автоматически увеличивал масштаб на моей веб-странице. После удаления col padding, я думаю, автозум работает правильно! Спасибо!
Ryan 08 март 2017, в 03:46
0

Как добавить / удалить отступы только для экранов sm и md, а не для экранов xs и lg? Пожалуйста, предложите ..
Shivam 20 март 2017, в 09:40
0

Привет @Shivam, я добавил выше пример для удаления заполнения для небольших устройств только в SASS. Вы можете адаптировать его к разным размерам для ваших нужд.
martinedwards 30 март 2017, в 08:10
0

Спасибо @martinedwards.
Shivam 31 март 2017, в 07:01

Показать ещё 9 комментариев

41

Уменьшение только заполнения в столбцах не приведет к трюку, так как вы увеличите ширину страницы, делая ее неравномерной с остальной частью вашей страницы, скажем, навигационной. Вы должны одинаково уменьшить отрицательную маржу в строке. Взяв пример @Martinedwards 'LESS:

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

phoeb 10 авг. 2014, в 23:37

0

Это только проблема, когда ваша строка не находится в контейнере или другом столбце. Отрицательные поля просто смещают отступ от этих элементов
Fred Stark 10 нояб. 2015, в 00:59
0

Мне нужно !important чтобы оба поля были для этой работы
Philip Bijker 02 март 2017, в 08:32

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

Конечно, вы можете @включать только те декларации, которые вам нужны.

Vitaliy Silin 31 июль 2014, в 07:38

0

Я пытаюсь использовать этот миксин (спасибо за это) в этой ситуации, и отступы не работают. .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 18 март 2015, в 13:36
0

Я понимаю, что не так. Мне нужно создать еще один миксин для этого решения работает. Кстати, спасибо за миксин SASS :)
jpcmf80 18 март 2015, в 13:49
0

Я просто создаю этот @mixin nopadding{ padding:0!important; } в моем _mixin.scss и затем добавьте @include nopadding; к коду выше. :)
jpcmf80 18 март 2015, в 14:49

Показать ещё 1 комментарий

16

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

bhargav 19 авг. 2016, в 12:26

1

Это не сработало для меня
Bochu 10 окт. 2016, в 15:45
0

У меня работает при добавлении в столбец. Это следует использовать при использовании вложенных столбцов, чтобы избежать множественного заполнения.
NicolasBernier 14 окт. 2016, в 14:11
3

Также можно добавить класс no-gutter в родительский .row .
ArtBIT 15 окт. 2016, в 16:58
2

@ArtBIT Я думаю, что вам нужно кодировать no-gutters в соответствии с v4-alpha.getbootstrap.com/layout/grid/#no-gutters . Это не встроено.
Caltor 16 авг. 2017, в 13:45
0

У меня это тоже не сработало
Azarsa 19 авг. 2017, в 10:09

Показать ещё 3 комментария

9

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

link 06 авг. 2014, в 19:45

8

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

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

note:.p-0 и .m-0 уже добавлены bootstrap.css

Ali Göksel Bektaş 15 янв. 2017, в 16:12

1

v4-alpha.getbootstrap.com/utilities/spacing
Benoit Blanchon 14 фев. 2017, в 14:05
0

Работает как шарм, спасибо
Cécile Fecherolle 21 фев. 2018, в 13:23

6

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

Guillaume Gautier 05 апр. 2018, в 09:20

6

[class*="col-"]
  padding: 0
  margin: 0

Sharpless512 14 июнь 2014, в 20:16

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-dan 20 май 2015, в 10:37

2

Мне кажется, что проще использовать

margin:-30px;

чтобы переопределить исходное значение, заданное бутстрапом.

Я пробовал

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

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

Basheer 15 дек. 2015, в 08:43

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, а margin -15px margin будет балансировать сточную канавку из столбцов. Хорошее объяснение здесь о желобах и строках в Bootstrap 3.

1Bladesforhire 08 июль 2015, в 23:35

1

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

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

.no-gutter > [class*='col-'] {
        padding-right:0;
        padding-left:0;
    }

Super Model 31 июль 2018, в 23:54

0

Это сработало и не требовало LESS или SASS. Однако я заметил, что должен был добавить класс контейнера к моей строке, а также применить этот дополнительный стиль: margin:0 auto; ,
Volomike 17 янв. 2019, в 01:36
0

Разработчики должны будут понять, что, как только это будет сделано, им нужно создать DIV внутри столбца и применить к нему поле, чтобы создать свои собственные размеры желоба.
Volomike 17 янв. 2019, в 01:37

1

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

<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

Kelly Baker 20 нояб. 2017, в 04:03

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 25 дек. 2016, в 20:43

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 23 авг. 2016, в 08:33

0

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>

Smi 14 дек. 2018, в 08:46

0

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

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

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

Rafiqul Islam 25 июль 2017, в 15:52

0

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

TheCrazyProfessor 26 дек. 2016, в 15:33

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

Mahesh 26 июль 2016, в 16:01

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

Adrien Be 15 фев. 2016, в 06:18

0

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

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

Mohan Dere 13 дек. 2015, в 12:36

0

Похоже, что на этой связанной странице размещена важная информация. Это не путь ТАК. Поместите необходимую информацию в свой ответ!
jogo 13 дек. 2015, в 12:39
0

Или люди могут просто использовать принятый ответ с 159 голосами против и без голосов, это было здесь в течение двух лет. Или один из нескольких других ответов с более чем десятью ответами. Вам придется больше постараться, чтобы заработать место на этой странице против этого конкурса.
Tom Zych 13 дек. 2015, в 14:30

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>

Sreelakshmi 30 нояб. 2015, в 08:43

0

Не могли бы вы дать объяснение с вашим ответом.
PKirby 30 нояб. 2015, в 06:53
0

предоставьте эти коды до или после тега <head>, чтобы они переопределяли свойства класса на этой странице
Sreelakshmi 30 нояб. 2015, в 06:58
0

Надеюсь, это поможет. Это сработало для меня
Sreelakshmi 30 нояб. 2015, в 07:03

Показать ещё 1 комментарий

0

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

.margL0 { margin-left:0 !important }

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

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

Udit Bansal 24 окт. 2013, в 11:46

Ещё вопросы

Это простой CSS, кроме вложенности (которая также есть в SASS), поэтому он должен работать так же.
Прекрасно работает в отзывчивой среде.
Я предлагаю использовать прямой дочерний селектор для улучшения производительности. Вместо этого используйте & >[class*="col-"] .
Это хорошая идея. Затем вы можете более точно указать, какие строки вы не хотите заполнять, что автоматически остановит включение всех потомков. Мое решение состояло только в том, чтобы покрыть случай ОП, где у него есть столбцы, вложенные в столбцы.
@JohnWu, который также не позволяет вложенным строкам наследовать стиль, что доставило мне немало хлопот. Спасибо!
Вы действительно должны использовать вместо этого [class^="col-"], [class*=" col-"] {...} чтобы вы случайно не нацеливались на классы с именем foocol- например. Это будет предназначаться для элементов, которые имеют это имя класса в начале или имеют его как вторичный класс, а не нацеливание на то, где строка находится как часть имени другого класса.
Святой курит! Я просто часами боролся с тем, что я считал ошибкой в окне просмотра iOS, потому что мой iPhone 6 иногда (но не всегда) автоматически увеличивал масштаб на моей веб-странице. После удаления col padding, я думаю, автозум работает правильно! Спасибо!
Как добавить / удалить отступы только для экранов sm и md, а не для экранов xs и lg? Пожалуйста, предложите ..
Привет @Shivam, я добавил выше пример для удаления заполнения для небольших устройств только в SASS. Вы можете адаптировать его к разным размерам для ваших нужд.
Это только проблема, когда ваша строка не находится в контейнере или другом столбце. Отрицательные поля просто смещают отступ от этих элементов
Мне нужно !important чтобы оба поля были для этой работы
Я пытаюсь использовать этот миксин (спасибо за это) в этой ситуации, и отступы не работают. .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); } }
Я понимаю, что не так. Мне нужно создать еще один миксин для этого решения работает. Кстати, спасибо за миксин SASS :)
Я просто создаю этот @mixin nopadding{ padding:0!important; } в моем _mixin.scss и затем добавьте @include nopadding; к коду выше. :)
У меня работает при добавлении в столбец. Это следует использовать при использовании вложенных столбцов, чтобы избежать множественного заполнения.
Также можно добавить класс no-gutter в родительский .row .
@ArtBIT Я думаю, что вам нужно кодировать no-gutters в соответствии с v4-alpha.getbootstrap.com/layout/grid/#no-gutters . Это не встроено.
Это сработало и не требовало LESS или SASS. Однако я заметил, что должен был добавить класс контейнера к моей строке, а также применить этот дополнительный стиль: margin:0 auto; ,
Разработчики должны будут понять, что, как только это будет сделано, им нужно создать DIV внутри столбца и применить к нему поле, чтобы создать свои собственные размеры желоба.
Похоже, что на этой связанной странице размещена важная информация. Это не путь ТАК. Поместите необходимую информацию в свой ответ!
Или люди могут просто использовать принятый ответ с 159 голосами против и без голосов, это было здесь в течение двух лет. Или один из нескольких других ответов с более чем десятью ответами. Вам придется больше постараться, чтобы заработать место на этой странице против этого конкурса.
Не могли бы вы дать объяснение с вашим ответом.
предоставьте эти коды до или после тега <head>, чтобы они переопределяли свойства класса на этой странице
Надеюсь, это поможет. Это сработало для меня

MackieeE · Accepted Answer · 2013-10-24T10-37-00.000Z

Обычно вы используете .row, чтобы обернуть два столбца, а не .col-md-12, - столбец, в котором находится другой столбец. Afterall, .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>

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

.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}

Является ли необходимым добавление .without-padding к классу контейнера? Я бы сказал, что достаточно добавить .nopadding в div .col-md-8 с предоставленным вами кодом CSS.
Я обычно создаю 3 дополнительных класса в своем собственном CSS, а именно .padding-0 который устанавливает левый и правый отступы (только) в 0; .padding-sm который устанавливает отступ в .padding-md и .padding-md который устанавливает отступ в 5px. Обычный отступ составляет 15px (если не настроен), поэтому этих дополнительных классов достаточно.
кстати .row переехал это новая линия
Обычный отступ настраивается в variables.less @ grid-gutter-width: 30px;
есть ли какой-либо предопределенный начальный загрузчик для удаления отступов или создания класса - это единственное решение
Для меня добавление класса no-gutter убрало отступы, отступы от ячеек
Старый, но я подумал, что это также стирает ваши смещения, кажется.
@GauravAggarwal Да, с Bootstrap 3.4.0, есть. Смотри мой ответ .