Bootstrap 3 e 4 .container-fluid con griglia che aggiunge imbottitura indesiderata

Vorrei che il mio contenuto fosse fluido, ma quando si utilizza .container-fluidcon la griglia di Bootstrap, vedo ancora il riempimento. Come posso eliminare l'imbottitura?

Vedo che non ottengo il riempimento con .row, ma voglio aggiungere colonne e non appena lo faccio, il riempimento è tornato: O.

Voglio essere in grado di utilizzare le colonne a tutta larghezza.

Un esempio:

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

Soluzione che ho:

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

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

per

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

Dovresti anche aggiungere una "riga" a ciascun contenitore che "risolverà" questo problema!

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

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

Si prega di trovare il css effettivo da Bootstrap

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

Quando aggiungi una .container-fluidclasse, viene aggiunta una spaziatura orizzontale di 15px e la stessa verrà rimossa quando aggiungi una .rowclasse come elemento figlio dal margine negativo impostato sulla riga.

Sono passati 5 anni ed è abbastanza strano che ci siano così tante risposte che non seguono (o sono contrarie) alle regole del bootstrap o che non rispondono effettivamente alla domanda ...

Risposta breve:
usa semplicemente la no-guttersclasse di Bootstrap nella tua riga per rimuovere il riempimento:

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

(Inoltre hai dimenticato di aggiungere </div>alla fine del tuo file. È corretto anche nel codice sopra)

Nota:

Ci sono casi in cui si desidera rimuovere anche l'imbottitura del contenitore stesso. In questo caso prendere in considerazione l'eliminazione .containero le .container-fluidclassi come raccomandato dalla documentazione .

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

Risposta lunga:

Le imbottiture si ottiene in realtà documentata nella Bootstrap di documentazione :

Le righe sono wrapper per le colonne. Ogni colonna ha un riempimento orizzontale (chiamato grondaia) per controllare lo spazio tra di loro. Questa imbottitura viene quindi contrastata sulle righe con margini negativi . In questo modo, tutto il contenuto delle colonne è visivamente allineato sul lato sinistro.

E sulla soluzione, che è stata anche documentata:

Le colonne hanno un riempimento orizzontale per creare i margini interni tra le singole colonne, tuttavia, puoi rimuovere il margine dalle righe e il riempimento dalle colonne con .no-grondaie su .row.

Per quanto riguarda la caduta del contenitore:

Hai bisogno di un design edge-to-edge? Elimina il .container o .container-fluid genitore.

Bonus: sugli errori trovati nelle altre risposte

• Evita di hackerare le classi container di bootstrap invece di assicurarti di aver inserito tutto il contenuto in col-s e di averlo avvolto con row-s come dice la documentazione :

In un layout a griglia, il contenuto deve essere posizionato all'interno di colonne e solo le colonne possono essere figlie immediate di righe.

• Se devi ancora fare hack (nel caso qualcuno abbia già incasinato le cose e devi risolvere rapidamente il tuo problema) prendi in considerazione l'utilizzo di Bootstrap px-0per rimuovere invece le imbottiture orizzontali pl-0 pr-0o reinventare i tuoi stili.

Penso di aver avuto gli stessi requisiti di Tim, ma nessuna delle risposte prevede una soluzione di "colonne da bordo a bordo della finestra con normali grondaie interne". O un altro modo per dirlo: come posso fare in modo che la mia prima e ultima colonna si rompa nel padding del contenitore e fluisca verso il bordo del viewport, pur mantenendo le normali grondaie tra le colonne.

Da quello che posso dire, non esiste una soluzione pulita e ordinata. Questo è ciò che funziona per me, ma è ben al di fuori di tutto ciò che sarebbe supportato da Bootstrap. Ma per ora funziona (Bootstrap 3.3.5 e 4.0-alpha).

http://www.bootply.com/ioWBaljBAd

HTML di esempio:

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

Il trucco è annidare un divtra la riga e le colonne per generare il margine aggiuntivo di -15px da inserire nel riempimento del contenitore. Il margine extra negativo crea uno scorrimento orizzontale (in spazi bianchi) su piccole finestre. L'aggiunta overflow-x: hiddena .rowè necessaria per sopprimerla.

Funziona allo stesso modo per .container-fluidcome .container.

Quindi ecco il breve riassunto di Bootstrap 4:

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

Per me funziona.

Perché non negare il riempimento aggiunto da container-fluid contrassegnando il riempimento sinistro e destro come 0?

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

modo ancora migliore? nessuna imbottitura a livello del contenitore (più pulito)

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

Hai solo bisogno di queste proprietà CSS nella classe .container di Bootstrap e puoi mettere dentro di lui il normale sistema a griglia senza che qualcuno il contenuto del contenitore sia fuori da lui (senza scroll-x nel viewport).

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

Nelle nuove versioni alpha hanno introdotto classi di spaziatura di utilità . La struttura può quindi essere modificata se li usi in modo intelligente.

Spaziatura classi di utilità

<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-0rimuoverà il riempimento iniziale e finale dalle colonne. Un problema rimasto sono le righe incorporate di una colonna, poiché hanno ancora un margine negativo. In questo caso:

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

Differenze di versione

Notare inoltre che le classi di spaziatura delle utilità sono state modificate dalla versione 4.0.0-alpha.4. Prima che fossero separati da 2 trattini es. => p-x-0Ep-l-0 e così via ...

Per rimanere in tema per la versione 3: questo è ciò che utilizzo sui progetti Bootstrap 3 e includo l'impostazione della bussola, per questa particolare utilità di spaziatura, in bootstrap-sass(versione 3) o bootstrap(versione 4.0.0-alpha.3) con doppi trattini obootstrap (versione 4.0.0-alpha.4 e successive) con trattini singoli.

Inoltre, le ultime versioni aumentano fino a 5 volte un rapporto (es: pt-5padding-top 5) invece di solo 3.

Bussola

$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";

Output CSS

Ovviamente puoi sempre copiare / incollare le classi di spaziatura di riempimento solo da un file css generato.

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

Penso che nessuno abbia dato la risposta corretta alla domanda. La mia soluzione di lavoro è: 1. Dichiara semplicemente un'altra classe insieme all'esempio di classe container-fluid (.maxx):

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

2. Quindi usando la specificità nella parte CSS fai questo:

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

Questo funzionerà al 100% e rimuoverà l'imbottitura da sinistra e destra. Spero che aiuti.

Se stai lavorando con il configuratore puoi impostare @grid-gutter-widthda 30pxa0

L'ho usato <div class="container-fluid" style="padding: 0px !important"> e sembra funzionare.

Ho lottato con questo me stesso e finalmente credo di averlo capito. È incredibile quante risposte fallite ci siano su questa domanda

Tutto quello che devi fare è rimuovere il padding da tutti i tuoi elementi .col e rimuovere il padding anche dal .container-fluid.

L'ho fatto nel mio progetto in modo un po 'trascurato aggiungendo quanto segue al mio file css:

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

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

Ho solo le diverse dimensioni delle colonne per tenere conto di tutte le diverse dimensioni delle colonne che sto usando. Sono fiducioso che esista un modo più pulito per scrivere il CSS, ma questo illustra il risultato finale.

Utilizzare px-0su containere no-gutterssu rowper rimuovere le imbottiture.

Citando da Bootstrap 4 - Sistema a griglia :

Le righe sono wrapper per le colonne. Ogni colonna ha un riempimento orizzontale (chiamato grondaia) per controllare lo spazio tra di loro. Questa imbottitura viene quindi contrastata sulle righe con margini negativi. In questo modo, tutto il contenuto delle colonne è visivamente allineato sul lato sinistro.

Le colonne hanno un riempimento orizzontale per creare i margini interni tra le singole colonne, tuttavia, puoi rimuovere il margine dalle righe e il riempimento dalle colonne con .no-gutterssul .row.

Di seguito è una demo live:

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>

Il motivo per cui funziona è che container-fluided colentrambi hanno la seguente imbottitura:

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

px-0può rimuovere l'imbottitura orizzontale da container-fluide no-gutterspuò rimuovere l'imbottitura da col.