Como posso remover todas as margens da container-fluidclasse boostrap e suas linhas?
.container-fluid { padding: 0;}
Isso basicamente faz o que eu quero, mas adiciona um estouro de 20px ao corpo. Então, devo apenas fazer isso:
body, html { overflow-x: hidden; }
Faça algo com .container-fluid > .row
Para ser específico sobre sua pergunta:
O .rowtem uma margem esquerda e direita negativa igual ao valor de preenchimento esquerdo / direito de col-*-*, é por isso que existem barras de rolagem horizontais quando você mexe na grade sem entender como ela funciona. Se você manipular as classes de coluna com preenchimento de zero à esquerda e à direita ou com algum outro valor, a margem negativa no .row deve ser igual ao preenchimento à esquerda e à direita das classes de coluna. O .container também possui preenchimento que corresponde ao valor das classes de coluna para evitar as barras de rolagem.
Portanto, a resposta é: .container-fluid > .row- faça a margem: 0 à esquerda e à direita se remover o preenchimento à esquerda e à direita das classes da coluna. Se tudo for zero, então você pode apenas ajustar o fluido .container ou .container com preenchimento de zero à esquerda e à direita, mas se você usar valores diferentes> 15px L e R, então é uma história diferente, pois .container/.container-fluidserá necessário ajustar se o preenchimento esquerdo e direito nas colunas for maior que 15 px.
Não há margens em col-*-*seu preenchimento, o que é bastante diferente quando você usa o tamanho da caixa: caixa da borda globalmente como o Boostrap 3 faz.
Se você quer uma grade apertada, remover todo o estofamento na esquerda e direito de todas as classes de coluna e, em seguida, remover o negativo margem na esquerda e direito do .row, em seguida, você pode remover a esquerda e direita preenchimento no .container.
DEMO: http://jsbin.com/jeqase/2/
Remove todo o preenchimento e margem negativa de uma grade estreita e largura total do .container com qualquer elemento circundante (body, html, qualquer que seja) com a classe .alt-grid:
.alt-grid [class*="col-"] {padding-left:0;padding-right:0}
.alt-grid .row {margin-left:0;margin-right:0}
/* container adjusted */
.alt-grid .container {width:100%;max-width:none;padding:0;}
Você também pode fazer isso com .container-fluid- a única coisa a zerar é o preenchimento esquerdo e direito.
Este artigo é coletado da Internet.
Se houver alguma infração, entre em [email protected] Delete.
deixe-me dizer algumas palavras