sharpetronics/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-11-04 00:03:15 -05:00
Code Issues Projects Releases Wiki Activity

Address #9873 and fix #9774

Browse Source 
* Update styling of justified nav links to be more mobile friendly
(with all four rounded corners and some margin between items)
* Add note to docs to callout bogus WebKit rendering on component and
example
This commit is contained in:
Mark Otto 2013-08-26 17:37:52 -07:00
parent 8f83a6010a
commit 4d23aa4ef5
6 changed files with 73 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components.html
View File

@ -1243,7 +1243,11 @@ base_url: "../"
<h2 id="nav-justified">Justified</h2>
<p>Easily make tabs or pills equal widths of their parent with <code>.nav-justified</code>.</p>
<p>Easily make tabs or pills equal widths of their parent at screens wider than 768px with <code>.nav-justified</code>. On smaller screens, the nav links are stacked.</p>
<div class="bs-callout bs-callout-warning">
<h4>WebKit and responsive justified navs</h4>
<p>Chrome and Safari both exhibit a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing. This bug is also shown in the <a href="../examples/justified-nav/">justified nav example</a>.</p>
</div>
<div class="bs-example">
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">Home</a></li>

48
dist/css/bootstrap.css vendored
View File

@ -3899,6 +3899,7 @@ textarea.input-group-sm > .input-group-btn > .btn {
}
.nav-tabs.nav-justified > li > a {
margin-bottom: 5px;
text-align: center;
}
@ -3907,15 +3908,32 @@ textarea.input-group-sm > .input-group-btn > .btn {
display: table-cell;
width: 1%;
}
.nav-tabs.nav-justified > li > a {
margin-bottom: 0;
}
}
.nav-tabs.nav-justified > li > a {
margin-right: 0;
border-bottom: 1px solid #dddddd;
border-radius: 4px;
}
.nav-tabs.nav-justified > .active > a {
border-bottom-color: #ffffff;
.nav-tabs.nav-justified > .active > a,
.nav-tabs.nav-justified > .active > a:hover,
.nav-tabs.nav-justified > .active > a:focus {
border: 1px solid #dddddd;
}
@media (min-width: 768px) {
.nav-tabs.nav-justified > li > a {
border-bottom: 1px solid #dddddd;
border-radius: 4px 4px 0 0;
}
.nav-tabs.nav-justified > .active > a,
.nav-tabs.nav-justified > .active > a:hover,
.nav-tabs.nav-justified > .active > a:focus {
border-bottom-color: #ffffff;
}
}
.nav-pills > li {
@ -3955,6 +3973,7 @@ textarea.input-group-sm > .input-group-btn > .btn {
}
.nav-justified > li > a {
margin-bottom: 5px;
text-align: center;
}
@ -3963,6 +3982,9 @@ textarea.input-group-sm > .input-group-btn > .btn {
display: table-cell;
width: 1%;
}
.nav-justified > li > a {
margin-bottom: 0;
}
}
.nav-tabs-justified {
@ -3971,11 +3993,25 @@ textarea.input-group-sm > .input-group-btn > .btn {
.nav-tabs-justified > li > a {
margin-right: 0;
border-bottom: 1px solid #dddddd;
border-radius: 4px;
}
.nav-tabs-justified > .active > a {
border-bottom-color: #ffffff;
.nav-tabs-justified > .active > a,
.nav-tabs-justified > .active > a:hover,
.nav-tabs-justified > .active > a:focus {
border: 1px solid #dddddd;
}
@media (min-width: 768px) {
.nav-tabs-justified > li > a {
border-bottom: 1px solid #dddddd;
border-radius: 4px 4px 0 0;
}
.nav-tabs-justified > .active > a,
.nav-tabs-justified > .active > a:hover,
.nav-tabs-justified > .active > a:focus {
border-bottom-color: #ffffff;
}
}
.tabbable:before,

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

File diff suppressed because one or more lines are too long

1
examples/justified-nav/justified-nav.css
View File

@ -27,6 +27,7 @@ body {
border: 1px solid #ccc;
}
.nav-justified > li > a {
margin-bottom: 0;
padding-top: 15px;
padding-bottom: 15px;
color: #777;

2
getting-started.html
View File

@ -224,7 +224,7 @@ bootstrap/
<img src="../examples/screenshots/justified-nav.jpg" alt="">
</a>
<h4>Justified nav</h4>
<p>Expand on the default navbar and more to create justified navigation links.</p>
<p>Create a custom navbar with justified links. Heads up! <a href="../components/#nav-justified">Not too WebKit friendly.</a></p>
</div>
<div class="col-xs-6 col-md-4">
<a class="thumbnail" href="../examples/offcanvas/">

27
less/navs.less
View File

@ -159,6 +159,7 @@
float: none;
> a {
text-align: center;
margin-bottom: 5px;
}
}
@ -166,6 +167,9 @@
> li {
display: table-cell;
width: 1%;
> a {
margin-bottom: 0;
}
}
}
}
@ -173,14 +177,29 @@
// Move borders to anchors instead of bottom of list
.nav-tabs-justified {
border-bottom: 0;
> li > a {
border-bottom: 1px solid @nav-tabs-justified-link-border-color;
> li > a {
// Override margin from .nav-tabs
margin-right: 0;
border-radius: @border-radius-base;
}
> .active > a {
border-bottom-color: @nav-tabs-justified-active-link-border-color;
> .active > a,
> .active > a:hover,
> .active > a:focus {
border: 1px solid @nav-tabs-justified-link-border-color;
}
@media (min-width: @screen-sm-min) {
> li > a {
border-bottom: 1px solid @nav-tabs-justified-link-border-color;
border-radius: @border-radius-base @border-radius-base 0 0;
}
> .active > a,
> .active > a:hover,
> .active > a:focus {
border-bottom-color: @nav-tabs-justified-active-link-border-color;
}
}
}