1

Ich habe eine Bootstrap-Zeile, die Spalten hat, die zu zwölf hinzufügen. Nehmen wir die Farben aus dem Zusammenhang:Bootstrap-Spalten fügen zu 12 hinzu, sind aber immer noch umschlossen

class="col-md-1 control-label" 
class="col-md-2" 
class="col-md-1 control-label" 
class="col-md-2" 
class="col-md-1 control-label" 
class="col-md-1" 
class="col-md-1" 
class="col-md-1 control-label" 
class="col-md-1" 
class="col-md-1" 

= 12 !!!

Das zweite schreibgeschützte Feld wird jedoch aus irgendeinem Grund umgebrochen. Hat jemand einen Einblick, warum das passieren würde? Hier

ist eine Geige: http://jsfiddle.net/qrzb2ann/

+0

Sie haben 12 Spalten. Gut. An einigen Stellen verwenden Sie jedoch "col-md-1" und an einigen Stellen verwenden Sie "col-md-2". Die Sache ist, dass "col-md-1" und "col-md-2" '1 + 2 = 3'-Spalten einnehmen. :) – AdityaParab

+0

Also in Ihrem Code gibt es '1 + 2 + 1 + 2 + 1 + 1 + 1 + 1 + 1 + 1 + 1 + 1 = 14' Spalten. Es übersteigt 12, also werden die letzten 2 Spalten herumgewickelt. :) – AdityaParab

+1

IDK wie dieser Kerl 14 gezählt hat, habe ich 12. Ihr Code sieht gut aus. Sie erkennen jedoch, dass "md-*" -Klassen nur für mittelgroße Ansichtsfenster gelten. Wenn Sie wollen, dass es auf kleinen Bildschirmen so aussieht, müssen Sie "sm- *" Klassen hinzufügen, und ebenso für große und extra große Bildschirme. –

Antwort

2

Es gibt 2 zusätzliche label s in Sie Markup, das ist nicht col-* so ist es, den Abstand Abwerfen (obwohl es für mich nicht Einwickeln).

Ich glaube nicht, dass Sie leere Etiketten haben müssen. Wenn Sie sie behalten möchten, verwenden Sie pull-left, so dass sie schweben: links und nicht das Gitter auswirken.

<label class="pull-left"></label>

http://www.bootply.com/CxMOq6ARs3

EDIT: Jeder Eingang soll Etiketten aufweisen, um so in der Dokumentation beschrieben, die sr-only Klassen auf den leeren Etiketten verwenden, so dass sie die Gitterspalten nicht tun bewirken.

+0

Ja, das sind schreibgeschützte Felder. Ich habe gelesen, dass jedes Feld ein "Label" haben sollte, auch wenn es leer ist. Warum würde es den Abstand ohne das 'col * wegwerfen, da technisch diese" Etiketten "keinen Platz einnehmen? – jenryb

+0

Danke für Ihre Bearbeitung. Das Herausnehmen der leeren Etiketten behebt das Problem. Ich habe jedoch nach zukünftigen Benutzern gesucht, und Bootstrap-Dokumente geben an, das Etikett beizubehalten: "Beschriftungen immer hinzufügen Bildschirmleseprogramme haben Probleme mit Ihren Formularen, wenn Sie keine Beschriftung für jede Eingabe enthalten. Stellen Sie für diese Eingabegruppen sicher Zusätzliche Kennzeichnung oder Funktionalität wird an assistive Technologien übermittelt Die genaue Technik, die verwendet werden soll ... wird variieren ... "Ich werde Ihren Pull-links-Vorschlag verwenden – jenryb

+0

Ja, Sie haben Recht und die Dokumente fahren fort zu sagen, verwenden Sie die 'sr-only' Klasse, so dass sie nur auf Bildschirmlesern angezeigt werden. – ZimSystem

Verwandte Themen