Bootstrap 3 e 4 .container-fluid com grade adicionando preenchimento indesejado

Gostaria que meu conteúdo fosse fluido, mas ao usar .container-fluidcom a grade do Bootstrap, ainda estou vendo preenchimento. Como posso me livrar do enchimento?

Vejo que não obtenho o preenchimento com .row, mas quero adicionar colunas e, assim que o fizer, o preenchimento estará de volta: O.

Quero ser capaz de usar as colunas em largura total.

Um exemplo:

<div class="container-fluid">
    <div class="row">
      <div class="col-sm-6">
    <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div> 
  <div class="col-sm-6">
    <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div> 
</div>

Solução que tenho:

Substituir bootstrap.css, linke 1427 e 1428 (v3.2.0)

padding-right: 15px;
padding-left: 15px;

para

padding-right: 0px;
padding-left: 0px;

Você também deve adicionar uma "linha" a cada contêiner, o que "corrigirá" esse problema!

<div class="container-fluid">
   <div class="row">
        Some text
   </div>
</div>

Veja http://jsfiddle.net/3px20h6t/

Encontre o css real no Bootstrap

.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
.row {
  margin-right: -15px;
  margin-left: -15px;
}

Quando você adiciona uma .container-fluidclasse, ele adiciona um preenchimento horizontal de 15px, e o mesmo será removido quando você adicionar uma .rowclasse como um elemento filho pela margem negativa definida na linha.

5 anos se passaram, e é muito estranho que haja tantas respostas lá que não seguem (ou são contra) as regras de bootstrap ou não respondem realmente à pergunta ...

Resposta curta:
basta usar a no-guttersclasse do Bootstrap em sua linha para remover o preenchimento:

  <div class="container-fluid">
    <div class="row no-gutters">
      <div class="col-sm-6">
        <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly
          barebones HTML document.</p>
      </div>
      <div class="col-sm-6">
        <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly
          barebones HTML document.</p>
      </div>
    </div>
  </div>

(Além disso, você se esqueceu de adicionar </div>ao final do arquivo. Ele também está corrigido no código acima)

Nota:

Há casos em que você também deseja remover o preenchimento do próprio contêiner. Neste caso, considere descartar as classes .containerou .container-fluidconforme recomendado pela documentação .

<!--<div class="container-fluid">-->
<div class="row no-gutters">
  <div class="col-sm-6">
    <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly
      barebones HTML document.</p>
  </div>
  <div class="col-sm-6">
    <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly
      barebones HTML document.</p>
  </div>
</div>
<!--</div>-->

Resposta longa:

Os paddings você se realmente estão documentados de Bootstrap documentação :

As linhas são invólucros para colunas. Cada coluna tem um preenchimento horizontal (denominado calha) para controlar o espaço entre elas. Esse preenchimento é então neutralizado nas linhas com margens negativas . Dessa forma, todo o conteúdo em suas colunas é alinhado visualmente no lado esquerdo.

E sobre a solução, que também foi documentada:

As colunas têm preenchimento horizontal para criar medianizes entre colunas individuais; no entanto, você pode remover a margem das linhas e o preenchimento das colunas com .no- medianizes no .row.

Em relação à queda do recipiente:

Precisa de um design de ponta a ponta? Solte o .container ou .container-fluid pai.

Bônus: sobre os erros encontrados nas outras respostas

• Evite hackear classes de contêiner de bootstrap em vez de certificar-se de que colocou todo o conteúdo em col-s e os envolveu com row-s, conforme a documentação diz:

Em um layout de grade, o conteúdo deve ser colocado dentro de colunas e apenas colunas podem ser filhos imediatos de linhas.

• Se você ainda tiver que hackear (apenas no caso de alguém já bagunçar as coisas e você precisar corrigir o problema rapidamente), considere usar o Bootstrap px-0para remover preenchimentos horizontais pl-0 pr-0ou reinventar seus estilos.

Acho que tinha o mesmo requisito que Tim, mas nenhuma das respostas fornece uma solução de 'colunas de ponta a ponta da janela de visualização com calhas internas normais'. Ou outra forma de colocar isso: como posso fazer com que minha primeira e última coluna quebrem no preenchimento do contêiner e fluam para a borda da janela de visualização, enquanto ainda mantenho calhas normais entre as colunas.

Pelo que posso dizer, não existe uma solução limpa e organizada. Isso é o que funciona para mim, mas está bem além de qualquer coisa que seria suportada pelo Bootstrap. Mas funciona por agora (Bootstrap 3.3.5 e 4.0-alpha).

http://www.bootply.com/ioWBaljBAd

HTML de amostra:

<div class="container">
  <div class="row full-width-row">
    <div>
      <div class="col-sm-4 col-md-3">…</div>
      <div class="col-sm-4 col-md-3">…</div>
      <div class="col-sm-4 col-md-3">…</div>
      <div class="col-sm-4 col-md-3">…</div>
    </div>
  </div>
</div>

CSS:

.full-width-row {
  overflow-x: hidden;
}

.full-width-row > div {
  margin-left: -15px;
  margin-right: -15px;
}

O truque é aninhar um diventre a linha e as colunas para gerar a margem extra de -15 px a ser inserida no preenchimento do contêiner. A margem negativa extra cria rolagem horizontal (em espaços em branco) em janelas de exibição pequenas. Adicionar overflow-x: hiddenao .rowé necessário para suprimi-lo.

Isso funciona da mesma forma para .container-fluidcomo .container.

Portanto, aqui está o breve resumo do Bootstrap 4:

<div class="container-fluid px-0">
  <div class="row no-gutters">
    <div class="col-12">          //any cols you need
        ...
    </div>
  </div>
</div>

Funciona para mim.

Por que não negar o preenchimento adicionado pelo fluido do recipiente marcando o preenchimento esquerdo e direito como 0?

<div class="container-fluid pl-0 pr-0">

maneira ainda melhor? nenhum acolchoamento no nível do contêiner (limpador)

<div class="container-fluid pl-0 pr-0">

Você só precisa dessas propriedades CSS na classe .container do Bootstrap e você pode colocar dentro dele o sistema de grade normal sem que o conteúdo do container saia dele (sem scroll-x na janela de visualização).

HTML:

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            Your content here!
            ...    
        </div>
    </div>
    ... more rows
</div>

CSS:

/* Bootstrap custom */
.container{
    padding-left: 0rem;
    padding-right: 0rem;
    overflow: hidden;
}

Nas novas versões alfa, eles introduziram classes de espaçamento de utilitário . A estrutura pode então ser ajustada se você usá-los de uma maneira inteligente.

Espaçando classes de utilitários

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-4 col-md-3 pl-0">…</div>
        <div class="col-sm-4 col-md-3">…</div>
        <div class="col-sm-4 col-md-3">…</div>
        <div class="col-sm-4 col-md-3 pr-0">…</div>
    </div>
</div>

pl-0e pr-0removerá o preenchimento inicial e final das colunas. Um problema que resta são as linhas incorporadas de uma coluna, pois ainda têm margem negativa. Nesse caso:

<div class="col-sm-12 col-md-6 pl-0">
    <div class="row ml-0">
</div>

Diferenças de versão

Observe também que as classes de espaçamento de utilitários foram alteradas desde a versão 4.0.0-alpha.4. Antes que eles foram separados por 2 traços eg => p-x-0e p-l-0e assim por diante ...

Para ficar no tópico para a versão 3: Isso é o que eu uso em projetos Bootstrap 3 e incluo a configuração da bússola, para este utilitário de espaçamento em particular, em bootstrap-sass(versão 3) ou bootstrap(versão 4.0.0-alpha.3) com traços duplos ou bootstrap(versão 4.0.0-alpha.4 e superior) com traços simples.

Além disso, as versões mais recentes aumentam até 5 vezes a proporção (ex: pt-5padding-top 5) em vez de apenas 3.

Bússola

$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px) !default;

@import "../scss/mixins/breakpoints"; // media-breakpoint-up, breakpoint-infix
@import "../scss/utilities/_spacing.scss";

Saída CSS

Você pode, claro, sempre copiar / colar as classes de espaçamento de preenchimento apenas de um arquivo css gerado.

.p-0 { padding: 0 !important; }
.pt-0 { padding-top: 0 !important; }
.pr-0 { padding-right: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.pl-0 { padding-left: 0 !important; }
.px-0 { padding-right: 0 !important; padding-left: 0 !important; }
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pr-1 { padding-right: 0.25rem !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pl-1 { padding-left: 0.25rem !important; }
.px-1 { padding-right: 0.25rem !important; padding-left: 0.25rem !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pr-2 { padding-right: 0.5rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pl-2 { padding-left: 0.5rem !important; }
.px-2 { padding-right: 0.5rem !important; padding-left: 0.5rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pr-3 { padding-right: 1rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pl-3 { padding-left: 1rem !important; }
.px-3 { padding-right: 1rem !important; padding-left: 1rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pr-4 { padding-right: 1.5rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.pl-4 { padding-left: 1.5rem !important; }
.px-4 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.p-5 { padding: 3rem !important; }
.pt-5 { padding-top: 3rem !important; }
.pr-5 { padding-right: 3rem !important; }
.pb-5 { padding-bottom: 3rem !important; }
.pl-5 { padding-left: 3rem !important; }
.px-5 { padding-right: 3rem !important; padding-left: 3rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }

Acho que ninguém deu a resposta correta para a pergunta. Minha solução de trabalho é: 1. Basta declarar outra classe junto com o exemplo de classe de fluido de contêiner (.maxx):

 <div class="container-fluid maxx">
   <div class="row">
     <div class="col-sm-12">
     <p>Hello</p>
     </div>
   </div>
  </div>

2. Em seguida, usando a especificidade na parte css, faça o seguinte:

.container-fluid.maxx {
  padding-left: 0px;
  padding-right: 0px; }

Isso funcionará 100% e removerá o preenchimento da esquerda e da direita. Eu espero que isso ajude.

Se você estiver trabalhando com o configurador, você pode definir o @grid-gutter-widthde 30pxpara0

Eu usei <div class="container-fluid" style="padding: 0px !important"> e parece estar funcionando.

Eu mesmo tenho lutado com isso e finalmente acredito que descobri. É incrível quantas respostas falhadas existem para esta questão

Tudo o que você precisa fazer é remover o preenchimento de todos os seus elementos .col e remover o preenchimento também do fluido .container.

Fiz isso em meu próprio projeto um pouco descuidadamente adicionando o seguinte ao meu arquivo css:

.col, col-10, col-12, col-2, col-6 {
    padding: 0!important;
}

.container-fluid {
    padding: 0!important;
}

Eu só tenho os tamanhos de cores diferentes para compensar todos os tamanhos de cores diferentes que estou usando. Tenho certeza de que há uma maneira mais limpa de escrever o css, mas isso ilustra o resultado final.

Use px-0na containere no-guttersna rowpara remover os enchimentos.

Citando do Bootstrap 4 - Sistema de grade :

As linhas são invólucros para colunas. Cada coluna tem um preenchimento horizontal (denominado calha) para controlar o espaço entre elas. Esse preenchimento é então neutralizado nas linhas com margens negativas. Dessa forma, todo o conteúdo em suas colunas é alinhado visualmente no lado esquerdo.

As colunas têm preenchimento horizontal para criar medianizes entre colunas individuais; no entanto, você pode remover a margem das linhas e o preenchimento das colunas com .no-guttersno .row.

A seguir está uma demonstração ao vivo:

h1 {
  background-color: tomato;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />

<div class="container-fluid" id="div1">
  <div class="row">
    <div class="col">
        <h1>With padding : (</h1>
    </div>
  </div>
</div>

<div class="container-fluid px-0" id="div1">
  <div class="row no-gutters">
    <div class="col">
        <h1>No padding : > </h1>
    </div>
  </div>
</div>

A razão isto funciona é que container-fluide colambos têm seguinte padding:

padding-right: 15px;
padding-left: 15px;

px-0pode remover o preenchimento horizontal container-fluide no-gutterspode remover o preenchimento col.