<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>
</div>
- <div class="span8">
+ <div class="span4">
<h4>{{_i}}Horizontal{{/i}}</h4>
<p><code><dl class="horizontal"></code></p>
<dl class="horizontal">
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>
</div>
- </div><!-- /row -->
+ <div class="span4">
+ <div class="well">
+ <p>{{_i}}Horizontal description lists have two additional sizes: <code>.horizontal-small</code> and <code>.horizontal-large</code>.{{/i}}</p>
+ </div>
+ </div>
+ </div>
</section>
dd {
margin-left: 130px;
}
- &.horizontal-mini {
+ &.horizontal-small {
dt { width: 50px; }
dd { margin-left: 60px; }
}
- &.horizontal-small {
- dt { width: 90px; }
- dd { margin-left: 100px; }
- }
&.horizontal-normal {
// no additional styles needed
}
&.horizontal-large {
- dt { width: 140px; }
- dd { margin-left: 150px; }
- }
- &.horizontal-xlarge {
- dt { width: 170px; }
- dd { margin-left: 180px; }
- }
- &.horizontal-xxlarge {
dt { width: 190px; }
dd { margin-left: 200px; }
}