0
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-26 23:54:23 +01:00

Refine new inline list option

This commit is contained in:
Mark Otto 2012-11-04 12:36:37 -08:00
parent 68f26d959f
commit 28da31218f
4 changed files with 26 additions and 47 deletions

View File

@ -816,33 +816,14 @@ ol.unstyled {
ul.inline, ul.inline,
ol.inline { ol.inline {
*zoom: 1; list-style: none;
}
ul.inline:before,
ol.inline:before,
ul.inline:after,
ol.inline:after {
display: table;
line-height: 0;
content: "";
}
ul.inline:after,
ol.inline:after {
clear: both;
} }
ul.inline > li, ul.inline > li,
ol.inline > li { ol.inline > li {
float: left; display: inline-block;
margin-right: 14px; padding-right: 5px;
margin-left: 12px; padding-left: 5px;
}
ul.unstyled.inline > li,
ol.unstyled.inline > li {
padding-left: 0;
} }
dl { dl {

View File

@ -377,16 +377,16 @@
</pre> </pre>
<h3>Inline</h3> <h3>Inline</h3>
<p>A list of floated left items. Can be combined with with <code>.unstyled</code></p> <p>Place all list items on a single line with <code>inline-block</code> and some light padding.</p>
<div class="bs-docs-example"> <div class="bs-docs-example">
<ul class="unstyled inline"> <ul class="inline">
<li><span class="label label-important">&nbsp;&nbsp;</span> Stop signal</li> <li>Lorem ipsum</li>
<li><span class="label label-warning">&nbsp;&nbsp;</span> Prepare for signal</li> <li>Phasellus iaculis</li>
<li><span class="label label-success">&nbsp;&nbsp;</span> Go!</li> <li>Nulla volutpat</li>
</ul> </ul>
</div> </div>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;ul class="unstyled inline"&gt; &lt;ul class="inline"&gt;
&lt;li&gt;...&lt;/li&gt; &lt;li&gt;...&lt;/li&gt;
&lt;/ul&gt; &lt;/ul&gt;
</pre> </pre>

View File

@ -314,16 +314,16 @@
</pre> </pre>
<h3>{{_i}}Inline{{/i}}</h3> <h3>{{_i}}Inline{{/i}}</h3>
<p>{{_i}}A list of floated left items. Can be combined with with <code>.unstyled</code>{{/i}}</p> <p>{{_i}}Place all list items on a single line with <code>inline-block</code> and some light padding.{{/i}}</p>
<div class="bs-docs-example"> <div class="bs-docs-example">
<ul class="unstyled inline"> <ul class="inline">
<li><span class="label label-important">&nbsp;&nbsp;</span> Stop signal</li> <li>Lorem ipsum</li>
<li><span class="label label-warning">&nbsp;&nbsp;</span> Prepare for signal</li> <li>Phasellus iaculis</li>
<li><span class="label label-success">&nbsp;&nbsp;</span> Go!</li> <li>Nulla volutpat</li>
</ul> </ul>
</div> </div>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;ul class="unstyled inline"&gt; &lt;ul class="inline"&gt;
&lt;li&gt;...&lt;/li&gt; &lt;li&gt;...&lt;/li&gt;
&lt;/ul&gt; &lt;/ul&gt;
</pre> </pre>

View File

@ -106,25 +106,23 @@ ol ul {
li { li {
line-height: @baseLineHeight; line-height: @baseLineHeight;
} }
// Remove default list styles
ul.unstyled, ul.unstyled,
ol.unstyled { ol.unstyled {
margin-left: 0; margin-left: 0;
list-style: none; list-style: none;
} }
// Single-line list items
ul.inline, ul.inline,
ol.inline { ol.inline {
.clearfix(); list-style: none;
} & > li {
ul.inline > li, display: inline-block;
ol.inline > li { padding-left: 5px;
float: left; padding-right: 5px;
margin-right: 14px; }
margin-left: 12px;
}
// Reset left padding for unstyled
ul.unstyled.inline > li,
ol.unstyled.inline > li {
padding-left: 0;
} }
// Description Lists // Description Lists