rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-20 17:54:23 +01:00
Code Issues Actions Packages Releases Activity

Fixes #8770: mobile-first (stacked by default) horizontal dls

Browse Source
This commit is contained in:
Mark Otto 2013-08-05 09:10:52 -07:00
parent 41eef69e6f
commit 6af693d160
4 changed files with 50 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css.html
View File

@ -807,7 +807,7 @@ base_url: "../"
{% endhighlight %} {% endhighlight %}
<h4>Horizontal description</h4> <h4>Horizontal description</h4>
<p>Make terms and descriptions in <code>&lt;dl&gt;</code> line up side-by-side.</p> <p>Make terms and descriptions in <code>&lt;dl&gt;</code> line up side-by-side. Starts off stacked like default <code>&lt;dl&gt;</code>s, but when the navbar expands, so do these.</p>
<div class="bs-example"> <div class="bs-example">
<dl class="dl-horizontal"> <dl class="dl-horizontal">
<dt>Description lists</dt> <dt>Description lists</dt>

61
dist/css/bootstrap.css vendored
View File

@ -564,38 +564,35 @@ dd {
margin-left: 0; margin-left: 0;
} }
.dl-horizontal dt { @media (min-width: 768px) {
float: left; .dl-horizontal dt {
width: 160px; float: left;
overflow: hidden; width: 160px;
clear: left; overflow: hidden;
text-align: right; clear: left;
text-overflow: ellipsis; text-align: right;
white-space: nowrap; text-overflow: ellipsis;
} white-space: nowrap;
}
.dl-horizontal dd { .dl-horizontal dd {
margin-left: 180px; margin-left: 180px;
} }
.dl-horizontal dd:before,
.dl-horizontal dd:before, .dl-horizontal dd:after {
.dl-horizontal dd:after { display: table;
display: table; content: " ";
content: " "; }
} .dl-horizontal dd:after {
clear: both;
.dl-horizontal dd:after { }
clear: both; .dl-horizontal dd:before,
} .dl-horizontal dd:after {
display: table;
.dl-horizontal dd:before, content: " ";
.dl-horizontal dd:after { }
display: table; .dl-horizontal dd:after {
content: " "; clear: both;
} }
.dl-horizontal dd:after {
clear: both;
} }
abbr[title], abbr[title],

2
dist/css/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

31
less/type.less
View File

@ -141,18 +141,25 @@ dt {
dd { dd {
margin-left: 0; // Undo browser default margin-left: 0; // Undo browser default
} }
// Horizontal layout (like forms)
.dl-horizontal { // Horizontal description lists
dt { //
float: left; // Defaults to being stacked without any of the below styles applied, until the
width: (@component-offset-horizontal - 20); // grid breakpoint is reached (default of ~768px).
clear: left;
text-align: right; @media (min-width: @grid-float-breakpoint) {
.text-overflow(); .dl-horizontal {
} dt {
dd { float: left;
.clearfix(); // Clear the floated `dt` if an empty `dd` is present width: (@component-offset-horizontal - 20);
margin-left: @component-offset-horizontal; clear: left;
text-align: right;
.text-overflow();
}
dd {
margin-left: @component-offset-horizontal;
.clearfix(); // Clear the floated `dt` if an empty `dd` is present
}
} }
} }