Fixes #17969: Clear horizontal dls

- Using the grid classes, they still need clearfixes since rows aren't injected between them all
- Update docs to fix broken classes

diff --git a/docs/content/typography.md b/docs/content/typography.md
index 2c0207375efd558a30712dbe33d548541e438c1d..0c6d53aa2ea61c6d631b6f111c987efd8f4273a8 100644 (file)
--- a/docs/content/typography.md
+++ b/docs/content/typography.md
@@ -232,7 +232,7 @@ Align terms and descriptions horizontally by using our grid system's predefined
 
   <dt class="col-sm-3">Euismod</dt>
   <dd class="col-sm-9">Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
-  <dd class="col-sm-9 col-sm-offset-3">Donec id elit non mi porta gravida at eget metus.</dd>
+  <dd class="col-sm-9 offset-sm-3">Donec id elit non mi porta gravida at eget metus.</dd>
 
   <dt class="col-sm-3">Malesuada porta</dt>
   <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
@@ -243,8 +243,8 @@ Align terms and descriptions horizontally by using our grid system's predefined
   <dt class="col-sm-3">Nesting</dt>
   <dd class="col-sm-9">
     <dl class="row">
-      <dt class="col-sm-3">Nested definition list</dt>
-      <dd class="col-sm-9">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
+      <dt class="col-sm-4">Nested definition list</dt>
+      <dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
     </dl>
   </dd>
 </dl>

diff --git a/scss/_type.scss b/scss/_type.scss
index 9fe8194db56bf826a3a68c63d000f7655c950057..f29ef493d60531ba618a43bdad84d43084b4a2bd 100644 (file)
--- a/scss/_type.scss
+++ b/scss/_type.scss
@@ -137,3 +137,12 @@ mark,
     content: "\00A0 \2014"; // nbsp, em dash
   }
 }
+
+// Clean up some horizontal `<dl>`s built with grids
+// scss-lint:disable QualifyingElement
+dl.row {
+  > dd + dt {
+    clear: left;
+  }
+}
+// scss-lint:enable QualifyingElement