mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-19 14:27:12 +01:00
Code Issues Releases Wiki Activity

fix #2860: truncate .dl-horizontal terms and reset to stacked for <767px layouts

Browse Source
This commit is contained in:
Mark Otto 2012-03-31 23:53:54 -07:00
parent 452ddc0f0d
commit d652af1097
7 changed files with 42 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
docs/assets/bootstrap.zip
View File

Binary file not shown.

9
docs/assets/css/bootstrap-responsive.css vendored
View File

@ -139,6 +139,15 @@
.container-fluid { .container-fluid {
padding: 0; padding: 0;
} }
.dl-horizontal dt {
float: none;
clear: none;
width: auto;
text-align: left;
}
.dl-horizontal dd {
margin-left: 0;
}
.container { .container {
width: auto; width: auto;
} }

3
docs/assets/css/bootstrap.css vendored
View File

@ -458,6 +458,9 @@ dd {
margin-left: 9px; margin-left: 9px;
} }
.dl-horizontal dt { .dl-horizontal dt {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
float: left; float: left;
clear: left; clear: left;
width: 120px; width: 120px;

7
docs/base-css.html
View File

@ -371,7 +371,14 @@
<dd>Donec id elit non mi porta gravida at eget metus.</dd> <dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt> <dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd> <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
<dt>Felis euismod semper eget lacinia</dt>
<dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
</dl> </dl>
<hr>
<p>
<span class="label label-info">Heads up!</span>
Horizontal description lists will truncate terms that are too long to fit in the left column fix <code>text-overflow</code>. In narrower viewports, they will change to the default stacked layout.
</p>
</div> </div>
</div><!-- /row --> </div><!-- /row -->
</section> </section>

7
docs/templates/pages/base-css.mustache vendored
View File

@ -294,7 +294,14 @@
<dd>Donec id elit non mi porta gravida at eget metus.</dd> <dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt> <dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd> <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
<dt>Felis euismod semper eget lacinia</dt>
<dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
</dl> </dl>
<hr>
<p>
<span class="label label-info">{{_i}}Heads up!{{/i}}</span>
{{_i}}Horizontal description lists will truncate terms that are too long to fit in the left column fix <code>text-overflow</code>. In narrower viewports, they will change to the default stacked layout.{{/i}}
</p>
</div> </div>
</div><!-- /row --> </div><!-- /row -->
</section> </section>

15
less/responsive-767px-max.less
View File

@ -86,6 +86,21 @@
padding: 0; padding: 0;
} }
// TYPOGRAPHY
// ----------
// Reset horizontal dl
.dl-horizontal {
dt {
float: none;
clear: none;
width: auto;
text-align: left;
}
dd {
margin-left: 0;
}
}
// GRID & CONTAINERS // GRID & CONTAINERS
// ----------------- // -----------------
// Remove width from containers // Remove width from containers

1
less/type.less
View File

@ -135,6 +135,7 @@ dd {
// Horizontal layout (like forms) // Horizontal layout (like forms)
.dl-horizontal { .dl-horizontal {
dt { dt {
.text-overflow();
float: left; float: left;
clear: left; clear: left;
width: 120px; width: 120px;