github/bootstrap
1
1
Fork 0
mirror of https://github.com/jasny/bootstrap.git synced 2026-04-24 03:00:49 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fixes #8150: add .static-form-control for vertical alignment of static form text

Browse Source 
- Also fixes the vertical alignment of labels in horizontal layouts on
account of the recent button and input padding changes
- Also changes the vertical alignment of the checkboxes and radios in
horizontal forms
This commit is contained in:
Mark Otto
2013-08-05 12:17:09 -07:00
parent bac9e80a46
commit e23906faca
5 changed files with 54 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
css.html
View File

@@ -1257,10 +1257,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %}
<h2>Optional layouts</h2>
<p>Included with Bootstrap are optional form layouts for common use cases.</p>
<h3 id="forms-inline">Inline form</h3>
<h3 id="forms-inline">Inline form</h2>
<p>Add <code>.form-inline</code> for left-aligned and inline-block controls for a compact layout.</p>
<div class="bs-callout bs-callout-danger">
<h4>Requires custom widths</h4>
@@ -1289,7 +1286,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</form>
{% endhighlight %}
<h3 id="forms-horizontal">Horizontal form</h3>
<h2 id="forms-horizontal">Horizontal form</h2>
<p>Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding <code>.form-horizontal</code> to the form. Doing so changes <code>.form-group</code>s to behave as grid rows, so no need for <code>.row</code>.</p>
<form class="bs-example form-horizontal">
<div class="form-group">
@@ -1485,6 +1482,39 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %}
<h2 id="forms-controls-static">Static text in horizontal forms</h2>
<p>When you need to place regular, static text next to a form label within a horizontal form, use the <code>.form-control-static</code> class on a <code>&lt;p&gt;</code>.</p>
<form class="bs-example form-horizontal">
<div class="form-group">
<label for="inputEmail" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<p class="form-control-static">email@example.com</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-lg-2 control-label">Password</label>
<div class="col-lg-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</form>
{% highlight html %}
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail2" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<p class="form-control-static">email@example.com</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword2" class="col-lg-2 control-label">Password</label>
<div class="col-lg-10">
<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
</div>
</div>
</form>
{% endhighlight %}
<h2 id="forms-control-states">Form control states</h2>
<p>Provide feedback to users or visitors with basic feedback states on form controls and labels.</p>