2012-03-27 4 views
47

In Bootstrap 2, was ist der empfohlene Weg von Etiketten Schlange und schreibgeschützten Textfelder in einer Form. Der folgende Beispielcode erzeugt falsch ausgerichtete Felder:Wie Etiketten in einer Reihe aufstellen und schreibgeschützten Felder in einer Bootstrap 2 bilden

<form class="form-horizontal"> 
    <fieldset> 
     <legend>Sample</legend>  
     <div class="control-group"> 
      <label class="control-label">Readonly Field</label> 
      <div class="controls"> 
       Lorem Ipsum and then some 
      </div> 
     </div> 
    </fieldset> 
</form> 

Bitte beachte, dass ich dieses Problem beheben kann mich mit benutzerdefinierter CSS-up. Das ist nicht das Problem. Es scheint einfach albern, dass das nicht eingebaut ist, also habe ich das Gefühl, dass ich etwas übersehen muss.

+0

welche Version von BS? –

Antwort

85

Sie können den uneditable Eingang

<span class="input-xlarge uneditable-input">Lorem Ipsum and then some</span> 

EDIT:

Ab Bootstrap 3.0 eine Klasse hinzugefügt wurde, um diesen

zu behandeln Wenn Sie regelmäßig, statischen Text platzieren müssen neben einem Formular-Etikett innerhalb einer horizontalen Form, verwenden Sie die .form-control-static Klasse auf einem <p>

<div class="controls"> 
    <p class="form-control-static">Lorem Ipsum and then some</p> 
</div> 
+0

Gerade wurde mir klar, dass meine Frage falsch war, die Sie perfekt beantwortet haben, also werde ich es als die richtige Antwort bezeichnen. Allerdings eine Idee, was zu tun ist, wenn ich nur Text auf der rechten Seite möchte? – batkuip

+0

Sie wollen Text auf der rechten Seite der Eingabe? –

+0

Rechte Seite des Etiketts. Es gibt Fälle, in denen ein schreibgeschütztes Textfeld nicht passt. Wie mein ursprüngliches Beispiel. – batkuip

2

Es gibt einen Hack. Sie können <Label> mit Klasse "Checkbox"

In Ihrem Fall verwenden:

 
<div class="controls"> 
<label class="checkbox"> 
    Lorem Ipsum and then some 
</label> 
</div> 
+0

"checkbox" bekommt die vertikale Ausrichtung korrekt (wir suchen nach etwas mit padding-top: 5px, ja?), Funktioniert aber nicht auf meiner Seite, weil es ein ungewolltes 20px Padding-left-too hinzufügt. Ich denke, ich werde wahrscheinlich mit einer benutzerdefinierten Klasse gehen. – mwardm

Verwandte Themen