Perché i campi del modulo Bootstrap di Twitter si riempiono troppo bene con il contenitore del fluido?

Question

UPDATE: Dimostrazione del problema: http://jsfiddle.net/fdB5Q/embedded/result/

Da circa 767px a 998px, i campi del modulo sono più larghi del pozzetto di contenimento.

Più piccolo di 767 px e l'intera area del modulo passa a una nuova riga. La pagina visualizzata quando la finestra del browser è di circa 200 pixel di larghezza viene visualizzata perfettamente. I campi del modulo si restringono come ci si aspetterebbe.

Per un visiva, un'occhiata a questa domanda molto simile: Twitter Bootstrap CSS static-fluid form positioning

Ecco tutto nella testa:

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" /> 
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" /> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> 

Ecco tutto nel corpo:

<div class="container-fluid"> 

<div class="row-fluid"> 

<div class="span8"> 
<p>Some Content.</p> 
</div> 

<div class="span4"> 
    <div class="well">  
    <div class="control-group"> 
     <label class="control-label" for="name">Your Name</label> 
     <div class="controls"> 
     <input type="text" class="input-xlarge" name="name" id="name" maxlength="100" /> 
     </div> 
    </div> 
    </div> 
</div> 

</div> 

</div> 

penso Sto fraintendendo parte del quadro. Non dovrei usare un contenitore di liquidi? Che cosa sto facendo di sbagliato? Potrei mettere insieme qualcosa per sistemarlo, ma penso che il problema potrebbe essere che sto facendo qualcosa di sbagliato nella foto.

Ho provato a cambiare i miei span a 7 e 5 e ho ancora lo stesso errore. Ho provato 6 e 6, ma a quel punto la pagina ha iniziato a sembrare ridicola. Il resto delle risposte non aveva senso per me.

Ho cambiato la classe di input in grande invece che in xlarge. Aveva ancora un intervallo di ampiezza in cui è stato traboccato, e mi piacerebbe molto campi di forma più ampia se c'è spazio sul display.

Desidero evitare la barra di scorrimento orizzontale e voglio che il testo della pagina abbia le stesse dimensioni in modalità orizzontale o portatile sullo smartphone.

UPDATE: Immagini

La mia pagina problema:

versione semplificata:

S Versione implified a 200 px di larghezza del browser:

Answer 1

i tag HTML di ingresso e le loro corrispondenti .input-* stili impostati solo il css width. Questo è di design.

Ma aggiungendo un css max-width:100% si garantisce che gli ingressi troppo grandi siano tenuti sotto controllo.
ad es. aggiungere questo alla testa:

<style> 
    input { 
     max-width: 100%; 
    } 
</style> 

Answer 2

Di solito preferisco usare un altro class="row-fluid" e class="span12" in elementi con class="spanX" per ottenere la larghezza del 100% di qualche elemento.Ciò non causerà errori su risoluzioni diverse. Quindi, ho aggiunto un'altra classe row-fluid nel tuo elemento con la classe span4 e all'interno di quella nuova div aggiunto con span12. A volte devi sovrascrivere le impostazioni di Bootstrap predefinite per ottenere ciò che ti serve, quindi ho aggiunto anche la classe .my-input all'interno dell'elemento <input /> per ottenere il 100% di larghezza e rimuovere il riempimento sinistro e destro (il riempimento causerà errori sul lato destro). E qui è il codice: class

<div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="span8"> 
      <p>Some Content.</p> 
     </div> 
     <div class="span4 well"> 
      <div class="row-fluid"> 
       <div class="span12"> 
        <label class="control-label" for="name">Your Name</label> 
        <input type="text" class="my-input" name="name" id="name" maxlength="100" /> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

e CSS per comando

​.my-input 
{ 
    width: 100%; 
    padding: 4px 0 4px 0 !important; 
}​ 

È possibile vedere e Jsfiddle demo, cercare di ridimensionare schermo.

Answer 3

Ho appena imbattuto in questo problema e sul controllo dei documenti bootstrap per input di form si afferma 'utilizzare le classi di dimensionamento relativi come .input-grande o corrispondono ai suoi ingressi alle dimensioni delle colonne griglia utilizzando .span * classi.'

La mia riga di bootstrap è stata impostata su span9 per il contenuto e span3 per la barra laterale. L'impostazione <input class='span3'/> ha risolto il problema per me, le caselle di input rimangono all'interno della barra laterale a mano a mano che le dimensioni dello schermo si riducono.

Answer 4

Come indicato dalla Pavlo in questa risposta: Twitter Bootstrap: Stop input field extending beyond well

Uso della classe input-block-level al posto del input-xlarge (o in altre dimensioni) risolve il problema pure.

Answer 5

Solo un po 'di input dopo aver giocato con questi FOREVER (sembra). Io uso un attributo di larghezza semplice e lo imposto tra l'85% e il 95% a seconda del contenitore, del padding e di altri fattori css per mantenere i campi di input effettivamente allungati fino al bordo del contenitore.

.input-example { 
    width: 90%; 
} 

IO NON SONO UN ESPERTO A QUESTO! Sto solo offrendo ciò che ho imparato e per favore non prendere questo come consiglio da uno sviluppatore esperto. Sto cercando di dare un po 'di tempo indietro a una comunità che mi ha salvato la vita in innumerevoli occasioni.

Answer 6

Ho riscontrato questo problema con gli input dei moduli e il corpo del pannello. Ho risposto nel seguente articolo: Twitter Bootstrap: Stop input field extending beyond well

Il problema per me era che il modulo stava traboccando. Ciò ha permesso agli input di seguirne l'esempio. Fissando la larghezza massima del modulo (larghezza massima: 100%) sono stato in grado di correggere input e qualsiasi altro contenuto che può essere inserito all'interno del modulo.

Answer 7

Purtroppo il problema è più insidioso di tutto questo. L'uso delle larghezze massime non ha fatto nulla per me. E odio le cose cercando di merda, così ho scavato dentro un po '...

Scende a queste tre linee nella dichiarazione css di una forma di controllo:

width: 100%; 
padding: 6px 12px; 
border: 1px solid #cccccc; 

Quando la larghezza di un l'elemento input testo è impostato, il padding orizzontale e il bordo vengono aggiunti al 100% anziché prelevati da esso. Quindi, se si dice la larghezza del 100% w, 500px, la larghezza del controllo del modulo di input del testo diventa w + 12 + 12 + 1 + 1, 526px. Il 26px in più è una costante che significa che a meno che la percentuale di larghezza non sia calcolata in modo dinamico come 100% * (w/(w + 26px)) o 100% -26px, le cose non verranno mai uguali.

Personalmente ritengo che questo sia un errore nella definizione o nell'implementazione dell'interfaccia html/css (non so quale, in realtà non voglio provare a trovare i riferimenti nelle sabbie mobili del standard). Se si dice che un campo di input sarà larghezza al 100%, è necessario applicare la correzione per rendere la larghezza all'interno dei margini del 100%, non del 100% senza il riempimento orizzontale e le larghezze del bordo incluse.

E, a proposito, il valore percentuale o le dimensioni fisse non contano; sono anche fuori di 26px. È necessario filtrare questi 26 px dalla larghezza.

Tutto ciò non va perso per gli input testuali bootstrap, tuttavia, almeno se si sta utilizzando un compilatore CSS che consente calcoli lato client. In meno, per esempio

input.form-control[type=text] { 
    width: calc(~'100%-26px'); 
} 

migliorerà il tutto. Si noti che i tipi di e-mail e password (almeno) hanno lo stesso problema.

26px è un po 'fragile, ovviamente, ma le costanti sono codificate nella dichiarazione di controllo del modulo, quindi le tue mani sono un po' legate. Sarebbe bello un test che verificasse le dimensioni dei controlli sul rendering per catturare le modifiche alla dichiarazione CSS sugli aggiornamenti del bootstrap, ma non stasera, grazie.