2014-03-05 9 views
5

Ich habe ein langes Etikett neben meiner Eingabe und es ist nicht vertikal ausgerichtet.Wie man lange Etiketten in Bootstrap 3 vertikal anordnet

Gibt es eine Option, um es zu lösen like it was in Bootstrap 2, bitte?

<form class="form-horizontal" role="form"> 
    <div class="form-group"> 
    <label for="input1" class="col-lg-2 control-label">Labdas kjas kljas dlkjasd lksjd  el1</label> 
    <div class="col-lg-10"> 
     <input type="text" class="form-control" id="input1" placeholder="Input1"> 
    </div> 
    </div> 
    <div class="form-group"> 
    <label for="input2" class="col-lg-2 control-label">Label2</label> 
    <div class="col-lg-10"> 
     <input type="password" class="form-control" id="input2" placeholder="Input2"> 
    </div> 
    </div> 
</form> 

Antwort

1

nicht sehr sauber ... Sie müssten wie so

.control-label.multiline 
{ 
    padding-top:0; 
} 
+0

Leider habe ich Angst, dass ich das nicht tun kann, weil mein Formular automatisch vom Framework gerendert wird. –

0

eine weitere Option, hier eine Überschreibung Klasse der langen Markierung, wie multiline und fügen Sie dann eine Definition für diese Klasse hinzuzufügen ist, das kann oder kann nicht basierend auf Ihrer Implementierung funktionieren. Ich habe es verwendet, um einige Fälle zu behandeln, in denen ich die "Col" -Klassen benötigte, um die volle Höhe ihrer Zeilen einzunehmen. Im Wesentlichen sagt es dem Browser, es als Tabelle zu interpretieren. Das sollte Ihnen erlauben, das Etikett vertikal zur Mitte auszurichten.

Ich lege es in eine Medienabfrage, weil kleiner als das für mich stapelt.

/* addition for displaying bits as tables to gain cell features */ 
@media (min-width: 769px) { 
    .table-display{display:table; margin:0 -15px; width:100%; } 
    .table-display .row, .table-display .form-group{display:table-row;} 
    .table-display [class*="col"]{float:none; display:table-cell; vertical-align:middle; padding-left:15px; padding-right:15px;} 
} 

würden Sie die Tabelle-Anzeige Klasse zu Ihrem Formular hinzuzufügen: <form class="form-horizontal table-display" role="form">

HTH, -Ted

Edited hinzufügen: heres a fiddle- http://jsfiddle.net/eAaa3/ Natürlich müssen Sie dehnen Sie den Rahmen, um ihn zu entstapeln

-1

Das ist, was ich mit meins mache. Ich arbeite tatsächlich mit Bootstrap heute

.control-label{ 
    float:left; 
    vertical-align:middle;   
} 
+0

-1 ?????? lol ok, wenn du es sagst. – LOTUSMS

0

Ich hatte das gleiche Problem, und ich habe stattdessen eine Tabelle. und wenn Sie es mit einer Tabelle implementieren, können Sie auch .table und .table-responsive Bootstrap-Klassen verwenden.

Verwandte Themen