CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
PlTaylor
PlTaylor

Reputation: 7525

Forcing a Horizontal Description list in Bootstrap

I am using twitter Bootstrap v3.2.0 to lay out my page. I have the following Description List and it displays fine in all the responsive views except the extra small view. How can I force a horizontal display in that view as well?

<dl class="dl-horizontal">
    <dt>Stack:</dt>
    <dd>461mm</dd>
    <dt>Reach:</dt>
    <dd>389mm</dd>
</dl>

Correct Layout (In all views except XS)

enter image description here

Incorrect Layout (In xs view)

enter image description here

Upvotes: 2

Views: 1502

Answers (1)

Christina
Christina

Reputation: 34652

Take this in your code now:

@media (min-width: 768px) {
  .dl-horizontal dt {
    float: left;
    width: 160px;
    clear: left;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dl-horizontal dd {
    margin-left: 180px;
  }
}

and put it outside the media query:

 .dl-horizontal dt {
    float: left;
    width: 160px;
    clear: left;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dl-horizontal dd {
    margin-left: 180px;
  }

Upvotes: 4

Related Questions