Twitter Bootstrap 3.0 riga più ampia della finestra

Mi sono messo a trafficare con Twitter Bootstrap e ho notato che il mio .row era più largo della lunghezza dello schermo.Twitter Bootstrap 3.0 riga più ampia della finestra

Ecco la example

Quando bootstrap 3,0 uscì Non ho esperienza questo.

Lo spazio in più sui lati destro viene da margin-right: -15px;

Ho fissando questo per ore senza fare alcun progresso sul perché o come sto prendendo in giro me stesso e la ricerca non è stato utile.

Sono sicuro che mi manca l'ovvio. Mi piacerebbe capire perché c'è questo spazio oltre la larghezza della finestra (costringendo uno scroller) e come evitarlo. Ho pensato che una riga corrispondesse al 100%

fonte

2013-10-27 Ronni Skansing

la soluzione corretta (https://getbootstrap.com/docs/3.3/css/#grid-example-fluid) è quello di utilizzare la classe container-fluid sul div circostante:

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

fonte

2014-05-12 18:41:54 Ben

Sì, il bug non può più essere replicato e dal momento che il .container-fluid è stato aggiunto. Questa è ora la risposta corretta e quindi ho cambiato la risposta accettata alla tua.+1 –

Questo ** non ** funziona se inserisci alcune colonne all'interno. 'bootstrap 3.2.0', [risposta di Anes] (http://stackoverflow.com/a/24028831/3744681) ha funzionato per me. – Jahid

Grazie mille! Mi ci è voluto molto per capire questo. – Schylar

Le tue righe devono essere posizionate all'interno di un div con la classe contenitore applicata.

Per esempio

<div class="container"> 
    <div class="row"> 
     Content 
    </div> 
</div>

fonte

2013-10-27 01:00:20

Ciao grazie. Come ho capito Lo scopo del contenitore è quello di concentrare le cose. Senza di esso mi sarei aspettato che una riga fosse larga al 100%? Devo creare un contenitore del cliente? –

EDIT >>

Questa è stata la risposta accettato in precedenza. Non eliminato se qualcuno ha siti con una vecchia versione.

EDIT < <

Si tratta di un bug

Quale sembra essere stato unfixed per istante. Forse una correzione corretta in 3.1.

Il miglior suggerimento sembra essere "overflow-x: hidden sull'elemento body.

https://github.com/twbs/bootstrap/issues/10711

Diverso da quello che hanno aggiunto/chiarito alcuni di essi in questo commit

Soprattutto questa linea "La gente cercando di creare completamente layout fluido (che significa il vostro sito si estende per l'intera larghezza della finestra) deve avvolgere il loro contenuto griglia in un elemento di contenimento con padding: 0 15px; per compensare il margin: 0 -15px; usato sul .row "

fonte

2013-10-27 01:35:21

ho riparato semplicemente rimuovendo margine sinistro & margin-destro da .row in bootstrap e anche modificando la sua larghezza al 100%

fonte

2014-06-04 04:07:22 Anees

Benvenuti in Stack Overflow. Come rispondi meglio alla risposta accettata? –

Il problema è che la rimozione del margine sinistro/destro distrugge completamente uno dei capisaldi architettonici del bootstrap ... – dudewad

La risposta accettata non ha funzionato. Tuttavia, questa sembra essere la vera risposta. –

Twitter Bootstrap 3.0 riga più ampia della finestra

risposta

Problemi correlati