Bootstrap - Removendo preenchimento ou margem quando o tamanho da tela é menor

EDITADO: Talvez eu deva perguntar qual seletor configura o padding lateral quando a tela é reduzida para menos de 480px de largura? Eu tenho navegado bootstrap-responsiveness.css por um tempo para localizar isso, mas nada parece afetar isso.

Original , basicamente, desejo remover qualquer preenchimento padrão ou margem definida para capacidade de resposta em telas de dispositivos menores.

Eu tenho um seletor background colorsobrescrito container-fluide para telas maiores eles renderizam perfeitamente 100% em toda a largura, mas a tela é reduzida a tamanhos menores, por padrão, o Bootstrap parece adicionar uma margem ou preenchimento em container-fluidou container.

<div class="container-fluid">
    <div class="row-fluid">
      test
    </div>
</div>

Se eu usar css personalizado para sobrescrever o estilo padrão do Bootstrap, qual consulta de mídia ou seletor devo sobrescrever para remover este preenchimento em telas menores?

A consulta @mídia especificamente para 'telefones' é ..

@media (max-width: 480px) { ... }

Mas, você pode querer remover o preenchimento / margem para qualquer tamanho de tela menor. Por padrão, o Bootstrap ajusta as margens / preenchimento ao corpo, contêiner e barras de navegação em 978px.

Aqui estão algumas consultas que funcionaram (na maioria dos casos) para mim:

@media (max-width: 978px) {
    .container {
      padding:0;
      margin:0;
    }

    body {
      padding:0;
    }

    .navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {
      margin-left: 0;
      margin-right: 0;
      margin-bottom:0;
    }
}

Demo

Atualização para Bootstrap 4

Use os novos utilitários de espaçamento responsivos, que permitem definir preenchimento / margens para diferentes larguras de tela (pontos de interrupção): https://stackoverflow.com/a/43208888/171456

O problema aqui é muito mais complexo do que remover o preenchimento do contêiner, pois a estrutura da grade depende desse preenchimento ao aplicar margens negativas para as linhas fechadas.

Remover o preenchimento do contêiner, neste caso, causará um estouro do eixo x causado por todas as linhas dentro desta classe de contêiner, esta é uma das coisas mais estúpidas sobre o Bootstrap Grid.

Logicamente, deve ser abordado por

1. Nunca use a .containerclasse para nada além de linhas
2. Faça um clone da .containerclasse que não tem preenchimento para usar com HTML não grid
3. Para remover o .containerpreenchimento no celular, você pode removê-lo manualmente com consultas de mídia, o overflow-x: hidden;que não é muito confiável, mas funciona na maioria dos casos.

Se você estiver usando LESSo resultado final será semelhante a este

@media (max-width: @screen-md-max) {
    .container{
        padding: 0;
        overflow-x: hidden;
    }
}

Altere a consulta de mídia para o tamanho que você deseja segmentar.

Considerações finais, eu recomendo usar o Foundation FrameworkGrid como sua forma mais avançada

Este tópico foi útil para encontrar a solução em meu caso particular (bootstrap 3)

@media (max-width: 767px) {
  .container-fluid, .row {
    padding:0px;
  }
  .navbar-header {
    margin:0px;
  }
}

Para resolver problemas como este estou usando CSS - a maneira mais rápida e simples, eu acho ... Basta modificá-lo de acordo com suas necessidades ...

@media only screen and (max-width: 480px) {
    #your_id {width:000px;height:000px;}
}
@media only screen and (min-width: 480px) and (max-width: 768px) {
    #your_id {width:000px;height:000px;}
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
    #your_id {width:000px;height:000px;}
}
@media only screen and (min-width: 959px) {
    #your_id {width:000px;height:000px;}
}

A forma como faço com que um elemento tenha 100% da largura do dispositivo é usar margens negativas esquerda e direita nele. O corpo tem um preenchimento de 24px, então é para isso que você pode usar margens negativas:

element{
    margin-left:  -24px;
    margin-right: -24px;
    padding-left:  24px;
    padding-right:  24px;
}

No Bootstrap 4, a margem de 15px que o contêiner inicial tem, desce em cascata para todas as linhas e colunas. Então, algo assim funciona para mim ...

@media (max-width: 576px) {
    .container-fluid {
        padding-left: 5px;
        padding-right: 5px;
    }

    .row {
        margin-left: -5px;
        margin-right: -5px;
    }
    .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
        padding-left: 5px;
        padding-right: 5px;
    }
    .row.no-gutters {
        margin-left: 0;
        margin-right: 0;
    }
}

Já tive esse problema ocorrendo em sites que usavam formatação e código semelhantes, e me esforcei para descobrir quais eram os detalhes que faltavam para fazer alguns de meus sites funcionarem e outros não.

Para Bootstrap 3: A resposta para mim não foi reescrever css para .container-fluid, .row ou redefinir margens, o padrão consistente que percebi era que o comprimento de palavras mais longas estava prejudicando o design e criando margens .

As etapas da solução:

1. Teste sua página excluindo temporariamente as seções que contêm contêineres e teste seu site em navegadores pequenos. Isso identificará seu contêiner de problema.

2. Você pode ter um problema de formatação div. Se você fizer isso, conserte. Se tudo estiver bem, então:

3. Identifique se você usou palavras longas que não envolvem. Se você não pode mudar a palavra (como para slogans ou slogans, etc.)

Solução 1: formate a fonte para um tamanho menor em sua consulta de mídia para uma tela menor (geralmente considero @media (largura máxima: 767px) suficiente).

OU:

Solução 2:

@media (max-width: 767px){

h1, h2, h3 {word-wrap: break-word;}
}

O CSS de Paulius Marčiukaitis funcionou bem para o meu tema do Genesis. Veja como eu o modifiquei para atender aos meus requisitos:

@media only screen and (max-width: 480px) {
.entry {
background-color: #fff;
margin-bottom: 0;
padding: 10px 8px;

}

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

Aqui está o que eu faço para Bootstrap 3/4

Use fluido de recipiente em vez de recipiente.

Adicione isso ao meu CSS

@media (min-width: 1400px) {
    .container-fluid{
        max-width: 1400px;
    }   
}

Isso remove as margens abaixo da largura da tela de 1400px

Outro css que pode resolver o problema de margem é que você tem direction:someValueem seu css, então remova-o configurando-o como inicial.

Por exemplo:

body {
     direction:rtl;
 }
@media (max-width: 480px) {
    body {
     direction:initial;
    }
}

A solução fácil é escrever algo assim,

px-lg-1

mb-lg-5

Ao adicionar lg, a aula será aplicada apenas em telas grandes