Refine new inline list option

3 files changed, 16 insertions, 35 deletions

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 35cfe8240..b2675f640 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -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 {
diff --git a/docs/base-css.html b/docs/base-css.html
index 8cc571210..dd34401d5 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -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>
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index 38201f683..6fc646e8c 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -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>