Warum haben Formulargruppen einen negativen Rand im Bootstrap?

Ich habe diesen sehr einfachen Code mit Bootstrap 3:Warum haben Formulargruppen einen negativen Rand im Bootstrap?

<html> 
    <body> 
    <main class="container" role="main"> 
     <form class="simple_form form-horizontal"> 
     <div class="form-group text required campaign_url"> 
      <label class="text required control-label" for="campaign_url"><abbr title="required">*</abbr> Url</label> 
      <textarea class="text required form-control" name="campaign[url]" id="campaign_url"></textarea> 
     </div>

und es scheint wie folgt aus:

enter image description here

Beachten Sie, wie tho Etiketten und die Eingänge auf der linken Seite kleben. diese Elemente Inspizieren ich diese gefunden:

.form-horizontal .form-group { 
    margin-left: -15px; 
    margin-right: -15px; 
}

Warum ist das dort? Ich weiß, es ist trivial zu entfernen, aber es lässt mich fragen, ob die Art, wie ich Bootstrap benutze falsch ist. Wie soll ich es benutzen?

Quelle

2015-04-13 Pablo

Sie sind gemeint 'innerhalb von .row verwendet werden .col- *'. So ziemlich der gesamte Inhalt einer Bootstrap-Site sollte sich in einem '.col- *' div befinden, das mit einem '.row' div im' .container'div eingeschlossen ist. – Jon

Sie? Worauf genau beziehen Sie sich? Die Formulargruppen? Also ist die Struktur .form-horizontal> .col- *> .form-group> .control? Was ist eine Formulargruppe und was gruppiert sie? Ein einzelnes Steuerelement und sein Label? Eine Reihe von verwandten Steuerelementen wie eine Reihe von Optionsfeldern? – Triynko

Es passiert, weil Sie form-horizontal verwenden, die als eine Zeile zusammen mit col-* für Layout verwendet werden soll. Die Dokumente Bootstrap:

Verwenden Bootstrap vordefinierten Raster Klassen-Etiketten, und Gruppen von Formularsteuer in einem horizontalen Layout auszurichten durch Hinzufügen .form-horizontalen in die Form (was keine sein braucht). Wenn Sie dies tun, werden .form-Gruppen so geändert, dass sie sich wie Rasterzeilen verhalten. Daher ist .row nicht erforderlich.

Wenn Sie also einfach die form-horizontal entfernen, verschwindet der negative Rand.

http://codeply.com/go/QQnqgfKv9v

Quelle

2015-04-14 10:56:05 ZimSystem

Wenn Sie also .form-horizontal ... verwenden, bedeutet das, dass Sie col- * einzelnen Eingabe- und Beschriftungssteuerelementen innerhalb der .form-Gruppe hinzufügen sollen? Sie sagten: "form-horizontal ... soll als eine Zeile verwendet werden", aber dann sagten Sie "indem Sie .form-horizontal zum Formular hinzufügen ... indem Sie .form-Gruppen so ändern, dass sie sich wie Rasterzeilen verhalten". Also was ist es? Soll die Form eine Reihe sein oder soll die Formgruppe eine Reihe sein? Das hat Implikationen, wo Sie die col * -Klassen entweder in der .form-Gruppe oder in den Steuerelementen der Gruppe platzieren sollen. Sehr verwirrend und verschachtelt. – Triynko

Warum haben Formulargruppen einen negativen Rand im Bootstrap?

Antwort

Verwandte Themen