Bootstrap - Rimozione della spaziatura interna o del margine quando le dimensioni dello schermo sono inferiori

MODIFICATO: Forse dovrei chiedere quale selettore imposta il riempimento laterale quando lo schermo è ridotto a una larghezza inferiore a 480px? Ho esplorato bootstrap-responsiveness.css per un po 'per individuarlo, ma nulla sembra influenzarlo.

Originale Fondamentalmente voglio rimuovere qualsiasi riempimento predefinito o set di margini per la reattività sugli schermi dei dispositivi più piccoli.

Ho un selettore background colorsovrascritto container-fluide per schermi più grandi rendono perfettamente il 100% su tutta la larghezza ma lo schermo è ridotto a dimensioni più piccole, per impostazione predefinita, Bootstrap sembra aggiungere un margine o un riempimento su container-fluido container.

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

Se utilizzo css personalizzato per sovrascrivere lo stile predefinito di Bootstrap, su quale media query o selettore devo sovrascrivere per rimuovere questo riempimento su schermi più piccoli?

La query @media specifica per "telefoni" è ..

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

Tuttavia, potresti voler rimuovere il riempimento / margine per schermi di dimensioni inferiori. Per impostazione predefinita, Bootstrap regola i margini / padding del corpo, del contenitore e delle barre di navigazione a 978 px.

Ecco alcune domande che hanno funzionato (nella maggior parte dei casi) per me:

@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

Aggiornamento per Bootstrap 4

Usa le nuove utilità di spaziatura reattiva che ti consentono di impostare padding / margini per diverse larghezze dello schermo (punti di interruzione): https://stackoverflow.com/a/43208888/171456

Il problema qui è molto più complesso rispetto alla rimozione del riempimento del contenitore poiché la struttura della griglia si basa su questo riempimento quando si applicano margini negativi per le righe racchiuse.

La rimozione del riempimento del contenitore in questo caso causerà un overflow dell'asse x causato da tutte le righe all'interno di questa classe del contenitore, questa è una delle cose più stupide della griglia Bootstrap.

Logicamente dovrebbe essere avvicinato da

1. Non usare mai la .containerclasse per qualcosa di diverso dalle righe
2. Crea un clone della .containerclasse che non ha imbottitura per l'uso con html non grid
3. Per rimuovere il .containerpadding su mobile è possibile rimuoverlo manualmente con media query quindi overflow-x: hidden;che non è molto affidabile ma funziona nella maggior parte dei casi.

Se stai usando LESSil risultato finale sarà questo

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

Modifica la media query in qualsiasi dimensione desideri scegliere come target.

Considerazioni finali, consiglio vivamente di utilizzare la Foundation Frameworkgriglia come modo più avanzato

Questo thread è stato utile per trovare la soluzione nel mio caso particolare (bootstrap 3)

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

Per risolvere problemi come questo sto usando i CSS - il modo più veloce e più semplice penso ... Basta modificarlo in base alle tue esigenze ...

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

Il modo in cui faccio in modo che un elemento vada al 100% della larghezza del dispositivo è utilizzare i margini sinistro e destro negativi su di esso. Il corpo ha un'imbottitura di 24px, quindi è quello che puoi usare per i margini negativi:

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

In Bootstrap 4, il margine di 15 px del contenitore iniziale si estende a tutte le righe e le colonne. Quindi, qualcosa del genere funziona per me ...

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

Ho avuto questo problema su siti che utilizzavano una formattazione e un codice simili e mi sono arrovellato su quali fossero i dettagli mancanti che facevano funzionare alcuni dei miei siti e altri no.

Per Bootstrap 3: la risposta per me non era riscrivere css per .container-fluid, .row o reimpostare i margini, il modello coerente che ho capito era che la lunghezza di parole più lunghe stava eliminando il design e creando margini .

I passaggi della soluzione:

1. Testa la tua pagina eliminando temporaneamente le sezioni che contengono contenitori e prova il tuo sito su piccoli browser. Questo identificherà il contenitore del problema.

2. Potresti avere un problema di formattazione del div. Se lo fai, aggiustalo. Se tutto va bene allora:

3. Identifica se hai usato parole lunghe che non sono avvolgenti. Se non puoi cambiare la parola (come per gli slogan o gli slogan, ecc.)

Soluzione 1: formatta il carattere su una dimensione più piccola nella query multimediale per schermi più piccoli (di solito trovo che @media (larghezza massima: 767 px) sia sufficiente).

O:

Soluzione 2:

@media (max-width: 767px){

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

Il CSS di Paulius Marčiukaitis ha funzionato bene per il mio tema Genesis, ecco come l'ho ulteriormente modificato per le mie esigenze:

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

}

La soluzione facile è scrivere qualcosa del genere,

px-lg-1

mb-lg-5

Aggiungendo lg, la classe verrà applicata solo su schermi di grandi dimensioni

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

Ecco cosa faccio per Bootstrap 3/4

Usa contenitore-fluido invece di contenitore.

Aggiungilo al mio CSS

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

Ciò rimuove i margini al di sotto di 1400 px di larghezza dello schermo

Un altro CSS che può creare problemi di margine è quello che hai direction:someValuenel tuo CSS, quindi rimuovilo semplicemente impostandolo su iniziale.

Per esempio:

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