Skip to content

B
bootstrap
Commit 28da3121 authored by Mark Otto's avatar Mark Otto
Browse files
Options

Refine new inline list option

parent 68f26d95
Hide whitespace changes
Inline Side-by-side
Showing with 26 additions and 47 deletions
docs/assets/css/bootstrap.css
View file @ 28da3121
...@@ -816,33 +816,14 @@ ol.unstyled { ...@@ -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 {
......
docs/base-css.html
View file @ 28da3121
...@@ -377,16 +377,16 @@ ...@@ -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>
......
docs/templates/pages/base-css.mustache
View file @ 28da3121
...@@ -314,16 +314,16 @@ ...@@ -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>
......
less/type.less
View file @ 28da3121
...@@ -106,25 +106,23 @@ ol ul { ...@@ -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
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment