Twitter Bootstrap erstreckt sich über überquell

http://jsfiddle.net/jgehrs/MgcDU/3103/Twitter Bootstrap erstreckt sich über überquell

ich diesen Code-Block haben, die sich horizontal in 4 gleich große Spannweiten alle reihen sich führen sollte, aber wie Sie sehen können, ist der vierte Block in eine neue Zeile nach unten gedrückt wird. Ich benutze seit ein paar Tagen Bootstrap und das ist das erste Mal, dass ich das gesehen habe.

<div id='middle' class='row'> 
    <div class='span3'> 
    <div>1</div> 
    </div> 
    <div class='span3'> 
    <div>2</div> 
    </div> 
    <div class='span3'> 
    <div>3</div> 
    </div> 
    <div class='span3'> 
    <div>4</div> 
    </div>

spans overflowing

Edit: Hier ist ein jsFiddle das Problem zeigt.

Quelle

2013-04-01 Jeremy Gehrs

Gibt es eine Grenze? Das könnte es brechen. –

Es gibt einen 1px Rand, aber ich bekomme das gleiche Ergebnis ohne Rand. –

Sie möchten vielleicht ein JSfiddle erstellen. Wenn es nicht die Grenze ist, ist es vielleicht ein anderer Stil. –

Flüssigkeit Layout arbeitet mit Prozentsätzen. Sie können versuchen <div class="row-fluid">, dass es für mich behoben.

Quelle

2013-04-02 01:27:16 kefth

Yup, sieht so aus, war das Problem. Vielen Dank! –

Wow, danke dafür, keine Erwähnung, dass du Reihenflüssigkeit mit Containerflüssigkeit in der Dokumentation brauchst. Kein Wunder, dass meine Spalten übergelaufen sind –

In meinem Fall war der Fehler, dass ein Client eine Überschrift in den Zeilenabschnitt verschoben hatte. Diese Antwort hat mir geholfen, es zu sehen. Also Row-Fluid ist notwendig und muss am richtigen Platz sein ;-) – Ralf

JSFiddle

die CSS die Grenze Zugabe durchgeführt wird, nachdem das Rastersystem Breite berechnet und bewirkt, daß das Element wickeln. Ich legte eine Klasse auf das innere div und legte die Grenze auf das innere Element. Ich wickelte die Reihe auch in einen Div-Container, um ihr ein festes Layout zu geben.

.myBorder { border: 1px solid gray; } 

<div class='container'> 
<div class='row'> 
    <div class='span3'> 
    <div class="myBorder">1</div> 
    </div>

Elements with Borders Wrap

Quelle

2013-04-01 23:19:41 Yack

Funktioniert immer noch nicht für mich. Stellen Sie die Breite von .container auf 300 oder 500px ein, um zu sehen, was ich meine, sie wickeln wieder ein. Ist es nicht der springende Punkt des Zeilen/Span-Systems von Twitter Bootstrap, die Spannen in prozentuale Breiten aufzuteilen, unabhängig davon, wie groß die Eltern-Containerbreite ist, oder missverstehe ich, was das Grid-System von Bootstrap eigentlich machen soll? –

sehen, ob dies ist in der Nähe, was Sie nach: http://jsfiddle.net/panchroma/F7zRy/

Wie @kyriakos bemerkt Sie <div class='row-fluid'> verwenden möchten, wenn Sie ein Fluid Grid soll, und optional alles mit <div class="container-fluid"> wickeln, wenn Sie das Raster der füllenden gesamtes Fenster.

Und am besten keine Grenzen zu verwenden, weil sie zusätzliche Breite hinzufügen die Spalten und verursachen Umbruch. Wenn Sie Ränder verwenden müssen, verwenden Sie die Rahmen-Box

Viel Glück!

Quelle

2013-04-02 03:07:41

Sie müssen die Zeile in einem div mit Klasse container umbrechen. Darüber hinaus ändert die Klasse der div Reihe row-fluid, etwa so:

<div class='container'> 
    <div class='row-fluid'> 
     <div class='span3'> 
     <div>1</div> 
     </div> 
     <div class='span3'> 
     <div>2</div> 
     </div> 
     <div class='span3'> 
     <div>3</div> 
     </div> 
     <div class='span3'> 
     <div>4</div> 
     </div> 
    </div> 
    </div>

Schauen Sie hier für die Demo: http://jsfiddle.net/MgcDU/3107/

Hoffnung, das hilft.

Quelle

2013-04-02 03:16:35 psychobunny

Twitter Bootstrap erstreckt sich über überquell

Antwort

Verwandte Themen