Fix up broken input group example layouts

This commit is contained in:
Mark Otto 2013-06-15 11:37:59 -07:00
parent ecf9b020dd
commit 258e1d62fb
2 changed files with 11 additions and 5 deletions

View File

@ -348,6 +348,12 @@ body {
.bs-example-control-sizing input[type="text"] + input[type="text"] {
margin-top: 10px;
}
.bs-example-form {
overflow: hidden;
}
.bs-example-form .input-group {
margin-bottom: 10px;
}
/* List groups */
.bs-example > .list-group {

View File

@ -1516,7 +1516,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<p>Avoid using <code>&lt;select&gt;</code> elements here as they cannot be fully styled in WebKit browsers.</p>
</div>
<form class="bs-example">
<form class="bs-example bs-example-form">
<div class="input-group col-lg-9">
<span class="input-group-addon">@</span>
<input type="text" placeholder="Username">
@ -1553,7 +1553,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Optional sizes</h4>
<p>Add the relative form sizing classes to the `.input-group-addon`.</p>
<form class="bs-example">
<form class="bs-example bs-example-form">
<div class="input-group col-lg-9">
<span class="input-group-addon input-large">@</span>
<input type="text" class="input-large" placeholder="Username">
@ -1588,7 +1588,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Buttons instead of text</h4>
<p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
<form class="bs-example">
<form class="bs-example bs-example-form">
<div class="input-group col-lg-7">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
@ -1621,7 +1621,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Button dropdowns</h4>
<p></p>
<form class="bs-example">
<form class="bs-example bs-example-form">
<div class="input-group col-lg-7">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
@ -1681,7 +1681,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %}
<h4>Segmented dropdown groups</h4>
<form class="bs-example">
<form class="bs-example bs-example-form">
<div class="input-group col-lg-7">
<div class="input-group-btn">
<button type="button" class="btn btn-default" tabindex="-1">Action</button>