Bootstrap - Una sorta di margine sui dispositivi mobili (solo sul lato destro)

Ho creato una pagina mobile con bootstrap, ma per qualche tipo la pagina mobile ha un margine o una spaziatura sui dispositivi mobili sul lato destro dove posso scorrere. Ho cancellato po 'di codice, ma anche la struttura più semplice l'ha:Bootstrap - Una sorta di margine sui dispositivi mobili (solo sul lato destro)

<div class="container"> 
     <div class="row"> 
      <div class="col-lg-12"> 
      <div class="navigation"></div> 
      </div> 
     </div> 
    </div><!--container--> 

.container { 
    max-width:100%; 
    padding:0; 
    height: 100%; 
    width:100%; 
} 

.navigation { 
    height:3.4375em; 
    line-height:1em; 
    background-color:#E75200; 
}

ho caricato la pagina di prova qui: http://wp1011618.server-he.de/projekte/test/index2.html

ho la sensazione che sia a causa del col-lg-12 imbottitura , ma Bootstrap questo non può essere l'intenzione Bootstraps quindi mi sto chiedendo cosa c'è di sbagliato qui?

Grazie!

fonte

2014-09-17 Torben

ho capito:

html, body { 
    overflow-x: hidden; 
}

risolto per me!

fonte

2014-09-17 11:55:28 Torben

Sai perché questo succede? Ho avuto lo stesso problema (solo sul cellulare) e questa correzione ha funzionato. Non posso fare a meno di chiedermi perché, non si è verificato prima. – SamuelN

Ha funzionato anche per me, puoi spiegare perché? – Wraithseeker

Grazie mille! – tcacciatore

Se si desidera impostare il riempimento destro nell'intestazione di esempio, è sufficiente ad esempio quello stile in .container ad esempio: Riempimento-destra: 12px.

fonte

2014-09-17 10:27:30

.col-lg-12 classe ha padding-right: 15px; e padding-left: 15px;, che causa spazi bianchi. Rendili 0, quindi rimuovi margin-right: -15px; e margin-left: -15px; nella classe .row.

fonte

2014-09-17 10:35:51 bea

in bootstrap 4 aggiungendo la classe 'pr-0' risolve il problema –

Sai che non hai il file bootstrap.min.js nella tua directory js? Ad ogni modo, la soluzione è semplicemente non usare il "col-lg-12" div, "row" riempirà il 100% della larghezza, quindi perché vuoi questo?

fonte

2014-09-17 10:38:31 Joint

Perché è il modo corretto di usare il layout della griglia in bootstrap? Nella pagina originale c'è il contenuto di 2 colonne, quindi rende sende usare .col-lg-6 due volte allora. – Torben

quindi scrivi due .col-lg-6 elementi all'interno di .row. Element .col-lg-12 e altri hanno padding per essere utili per il contenuto, non per tutti i contenitori di pagine che dovrebbero riempire il 100% della larghezza del browser. Cambiare paddings e margini all'interno del bootstrap css non è una buona idea ... Vedi questo esempio: http://getbootstrap.com/css/#grid non c'è nessun .col-lg-12 div per contenere le colonne, le mettono dentro. riga – Joint

Non sono sicuro che se provasse a cambiare lo stile all'interno del css di bootstrap, ha semplicemente cercato di aggiungere uno stile in linea alla casella. –

Bootstrap - Una sorta di margine sui dispositivi mobili (solo sul lato destro)

risposta

Problemi correlati