Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Bootstrap
  • bootstrap
  • Issues
  • #17969
Closed
Open
Issue created Oct 19, 2015 by Administrator@rootContributor

V4 Docs - need clearfix on content/typography horiz description example?

Created by: tshinnic

While reading the v4-alpha1 docs closely on mobile, I noticed the "Horizontal description" dl/dt/dd example was sometimes misplacing dt texts vertically at xs/sm tiers. After playing with this it looks like the simple use of "col-sm-3" gets confused when the text of a prior "col-sm-3" wraps within its area.

      content_typo_horiz_euismod_nok_5

When I use what I think is meant by the 'clearfix' then the problem is avoided.

      content_typo_horiz_euismod_ok_4

--- a/docs/content/typography.md
+++ b/docs/content/typography.md
@@ -224,6 +224,8 @@ Align terms and descriptions horizontally by using our grid system's predefined
   <dt class="col-sm-3">Description lists</dt>
   <dd class="col-sm-9">A description list is perfect for defining terms.</dd>

+  <div class="clearfix"></div>
+
   <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>
@@ -231,6 +233,8 @@ Align terms and descriptions horizontally by using our grid system's predefined
   <dt class="col-sm-3">Malesuada porta</dt>
   <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>

+  <div class="clearfix"></div>
+
   <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
   <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
 </dl>

Is this change "worth it" to avoid the unsightliness? Would this in fact be a good example of when to use the 'clearfix' thing?

Assignee
Assign to
Time tracking