Refine new inline list option

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 {

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>

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>

less/type.less

@@ -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