Remova o preenchimento das colunas no Bootstrap 3

342

Problema:

Remova o preenchimento / margem à direita e esquerda de col-md- * no Bootstrap 3.

Código 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>

Saída desejada:

Atualmente, esse código adiciona preenchimento / margem à direita e esquerda das duas colunas. Gostaria de saber o que está faltando para remover esse espaço extra nas laterais?

Aviso prévio:

Se eu remover "col-md-4", as duas colunas serão expandidas para 100%, mas quero que elas fiquem próximas uma da outra.

css  twitter-bootstrap  html 
— kexxcream
fonte
11
Para o uso do Bootstrap 4, pl-0 pr-0ou seja,<div class="col-7 pl-0 pr-0">
— Muhammad Shahzad

Respostas:

454

Você normalmente usaria .rowpara quebrar duas colunas, não .col-md-12- é uma coluna que envolve outra coluna. Afinal, .rownão possui margens e preenchimentos extras que um col-md-12traria e também desconta o espaço que uma coluna introduziria com margens esquerda e direita negativas.

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

se você realmente deseja remover o preenchimento / margens, adicione uma classe para filtrar as margens / preenchimentos de cada coluna filho.

.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}
— MackieeE
fonte
É necessário adicionar .without-padding à classe de contêineres? Eu diria que adicionar .nopadding ao .col-md-8 div com o código CSS que você forneceu é suficiente.
— Charles Ingalls
59
Eu costumo criar 3 classes extras no meu CSS personalizado, ou seja, .padding-0que define o preenchimento esquerdo e direito (apenas) para 0; .padding-smque define o preenchimento para 2px e .padding-mdque define o preenchimento para 5px. O preenchimento usual é de 15px (a menos que seja personalizado), portanto, essas classes extras são suficientes.
— MichaelJTaylor
pela maneira .Row mudou-se da nova linha
— ozanmuyes
6
O preenchimento usual é personalizado em variables.less @ grid-gutter-width: 30px;
— Vladislav Lezhnev 10/10
6
Existe algum bootstrap predefinido para remover o preenchimento ou criar uma classe é a única solução
— Gaurav Aggarwal
186

O Bootstrap 4 adicionou .no-guttersclasse .

Bootstrap 3 : sempre adiciono esse estilo ao meu Bootstrap LESS / SASS:

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

Então, no HTML, você pode escrever:

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

Se você deseja segmentar apenas as colunas filho, pode usar o seletor filho (Obrigado John Wu).

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

Você também pode remover o preenchimento apenas para determinados tamanhos de dispositivo (exemplo 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;
    }
  }
}

Você pode remover a parte de largura máxima da consulta de mídia, se desejar que ele suporte pequenos dispositivos para cima.

— martinedwards
fonte
10
Isso é CSS simples, além do aninhamento (que também está no SASS), portanto deve funcionar da mesma maneira.
— Martinedwards
4
Sugiro usar o seletor filho direto para melhorar o desempenho. Use em & >[class*="col-"]vez disso.
— John Wu
3
@ JohnWu, que também impede que linhas aninhadas herdem o estilo, o que me causou alguns problemas. obrigado!
— Troy Carlson
2
Você realmente deve usá- [class^="col-"], [class*=" col-"] {...}lo para não segmentar acidentalmente as classes nomeadas foocol-por exemplo. Isso terá como alvo elementos que tenham esse nome de classe no início ou também como classe secundária, sem direcionar para onde a cadeia é encontrada como parte de outro nome de classe.
— Brett
11
Meu Deus! Passei horas lutando com o que eu pensava ser um bug na janela de exibição do iOS porque meu iPhone 6 às vezes (mas inconsistentemente) era automaticamente aumentado em minha página da web. Depois de remover o preenchimento da coluna, acho que o autozoom funciona adequadamente! Obrigado!
— 217 Ryan
45

Reduzir apenas o preenchimento das colunas não fará o truque, pois você aumentará a largura da página, tornando-a desigual com o restante da página, como navbar. Você precisa reduzir igualmente a margem negativa na linha. Tomando o exemplo MENOS do @martinedwards:

.row-no-padding {
  margin-left: 0;
  margin-right: 0;
  [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
— phoeb
fonte
Isso é apenas um problema quando sua linha não está em um contêiner ou em outra coluna. As margens negativas apenas compensar o preenchimento destes elementos
— Fred Stark
Eu precisava !importantpara ambas as margens para fazer este trabalho
— Philip Bijker
22

Especificamente para 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");

Então, em HTML, você pode usar 

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

Claro, você pode @ incluir apenas as declarações necessárias.

— Vitaliy Silin
fonte
Estou tentando usar esse mixin (obrigado por isso) nessa situação e o preenchimento não está funcionando. .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
Eu entendo o que está errado. Preciso criar outro mixin para esta solução funcionar. Btw, obrigado pela
— mixass
Eu apenas crio isso @mixin nopadding{ padding:0!important; }no meu _mixin.scss e depois adiciono @include nopadding;ao código acima. :)
— jpcmf80
18

A seguir, disponível apenas no Bootstrap4

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

nota: .p-0 e .m-0 já adicionaram o bootstrap.css

— Ali Göksel Bektaş
fonte
12

O Bootstrap 4 possui uma classe nativa para fazer isso: adicione a classe .no-guttersao pai.row

— Guillaume Gautier
fonte
10

Outra solução, viável apenas se você compilar o bootstrap a partir de suas fontes LESS, é redefinir a variável que define o preenchimento para as colunas.

Você encontrará a variável no variables.lessarquivo: é chamada @grid-gutter-width.

É descrito assim nas fontes:

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

Defina como 0, compile bootstrap.lesse inclua o resultado bootstrap.css. Você terminou. Pode ser uma alternativa para definir uma regra adicional, se você já estiver usando fontes de autoinicialização como eu.

— ligação
fonte
6

O Bootstrap 3, desde a versão 3.4.0 , possui uma maneira oficial de remover o preenchimento: a classe row-no-gutters.

Exemplo da documentação :

<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
fonte
3

Nenhuma das soluções acima funcionou perfeitamente para mim. Após esta resposta, eu pude criar algo que funciona para mim. Aqui também estou usando uma consulta de mídia para limitar isso apenas a telas pequenas.

@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
fonte
3

Remova o espaçamento das colunas em preto e branco usando o bootstrap 3.7.7 ou menos.

.no-calha é uma classe personalizada que você pode adicionar às suas DIVs de linha

.no-gutter > [class*='col-'] {
        padding-right:0;
        padding-left:0;
    }
— Super Model
fonte
Isso funcionou e não exigiu MENOS ou SASS. Eu notei que eu tinha que adicionar a classe recipiente à minha linha, no entanto, bem como aplicar este estilo extra: margin:0 auto;.
— Volomike
Os desenvolvedores precisarão perceber com isso que, uma vez feito isso, precisam criar um DIV dentro da coluna e aplicar margem a isso para criar seus próprios tamanhos de sarjeta.
— Volomike
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>

Você pode adicionar uma classe de linha à div dentro do col-md-4 e a margem -15px da linha equilibrará a sarjeta das colunas. Boa explicação aqui sobre calhas e linhas no Bootstrap 3.

— 1Bladesforhire
fonte
2

Eu acho que é mais fácil usar apenas 

margin:-30px;

para substituir o valor original definido pela inicialização.

eu tentei 

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

e funcionou para mim.

— Basheer
fonte
1

Coloque suas colunas em um .row e adicione a essa div uma classe chamada "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>

Em seguida, cole o conteúdo abaixo no seu arquivo 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
fonte
1

Remova / personalize o Bootstrap Gutter com referência 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>
Expandir snippet

— haryx8
fonte
0

Você pode criar uma nova classe para remover a margem e aplicar ao elemento em que deseja remover a margem extra:

.margL0 { margin-left:0 !important }

!importante : ajudará você a remover a margem padrão ou substituir o valor atual da margem

e aplique à div da qual você deseja remover a margem do lado esquerdo

— Udit Bansal
fonte
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
fonte
Você poderia fornecer uma explicação com sua resposta.
— PKirby
fornecer esses códigos antes ou depois <head> tag para que este irá substituir essas propriedades de classe nessa página
— Sreelakshmi
0

Você pode criar menos mixins usando o bootstrap para gerenciar margens e preenchimentos de suas colunas, como,

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

Uso: 

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

Da mesma forma, para definir margem / preenchimento zero, você pode usar,

xs-padding-lr-0px
xs-padding-l-0px
xs-padding-r-0px
— Mohan Dere
fonte
Parece que informações essenciais estão na página vinculada. Este não é o caminho do SO. Coloque informações essenciais em sua resposta!
— Jogo
Ou as pessoas poderiam simplesmente usar a resposta aceita com 159 votos a favor e sem voto negativo, que está aqui há dois anos. Ou uma das várias outras respostas com mais de dez votos positivos. Você terá que se esforçar mais para conseguir um lugar nesta página contra essa competição.
— Tom Zych
0

Desenvolvendo a resposta de Vitaliy Silin . Cobrindo não apenas os casos em que não queremos preenchimento, mas também os casos em que temos preenchimentos de tamanho padrão.

Veja a conversão ao vivo desse código para CSS em 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);
  }
}

Isso então gera:

.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
fonte
0

Às vezes, você pode perder o preenchimento desejado para as colunas. Eles acabam aderindo um ao outro. Para evitar isso, você pode atualizar a classe da seguinte maneira:

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

e classe correspondente:

.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
fonte
0

Se você baixar o bootstrap com os arquivos SASS, poderá editar o arquivo de configuração em que há uma configuração para a margem das colunas e salvá-lo, dessa forma o SASS calcula a nova largura das colunas.

— TheCrazyProfessor
fonte
0

Você pode personalizar seu sistema Bootstrap Grid e definir sua grade responsiva personalizada.

altere seus valores padrão para a seguinte largura da calha de @grid-gutter-width = 30pxpara@grid-gutter-width = 0px

(A largura da calha é preenchida entre as colunas. Ela é dividida ao meio pela esquerda e pela direita.)

— Rafiqul Islam
fonte
0

Eu ainda prefiro ter controle sobre todos os preenchimentos em todos os tamanhos de tela, então esse CSS pode ser útil para Vocês :)

.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;}
}
— Eryk Wróbel
fonte
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.