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,
ol.inline {
*zoom: 1;
}
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;
list-style: none;
}
ul.inline > li,
ol.inline > li {
float: left;
margin-right: 14px;
margin-left: 12px;
}
ul.unstyled.inline > li,
ol.unstyled.inline > li {
padding-left: 0;
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}
dl {

View File

@ -377,16 +377,16 @@
</pre>
<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">
<ul class="unstyled inline">
<li><span class="label label-important">&nbsp;&nbsp;</span> Stop signal</li>
<li><span class="label label-warning">&nbsp;&nbsp;</span> Prepare for signal</li>
<li><span class="label label-success">&nbsp;&nbsp;</span> Go!</li>
<ul class="inline">
<li>Lorem ipsum</li>
<li>Phasellus iaculis</li>
<li>Nulla volutpat</li>
</ul>
</div>
<pre class="prettyprint linenums">
&lt;ul class="unstyled inline"&gt;
&lt;ul class="inline"&gt;
&lt;li&gt;...&lt;/li&gt;
&lt;/ul&gt;
</pre>

View File

@ -314,16 +314,16 @@
</pre>
<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">
<ul class="unstyled inline">
<li><span class="label label-important">&nbsp;&nbsp;</span> Stop signal</li>
<li><span class="label label-warning">&nbsp;&nbsp;</span> Prepare for signal</li>
<li><span class="label label-success">&nbsp;&nbsp;</span> Go!</li>
<ul class="inline">
<li>Lorem ipsum</li>
<li>Phasellus iaculis</li>
<li>Nulla volutpat</li>
</ul>
</div>
<pre class="prettyprint linenums">
&lt;ul class="unstyled inline"&gt;
&lt;ul class="inline"&gt;
&lt;li&gt;...&lt;/li&gt;
&lt;/ul&gt;
</pre>

View File

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