Fix up broken input group example layouts
This commit is contained in:
parent
ecf9b020dd
commit
258e1d62fb
|
@ -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 {
|
||||
|
|
|
@ -1516,7 +1516,7 @@ For example, <code><section></code> should be wrapped as inline.
|
|||
<p>Avoid using <code><select></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><section></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><section></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><section></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><section></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>
|
||||
|
|
Loading…
Reference in New Issue