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

Justified nav now responsive; example updated accordingly (fixes #9708)

Browse Source
This commit is contained in:
Mark Otto 2013-08-16 14:01:32 -07:00
parent af7b072a74
commit e6f185acad
4 changed files with 48 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
dist/css/bootstrap.css vendored
View File

@ -3032,15 +3032,20 @@ button.close {
} }
.nav-tabs.nav-justified > li { .nav-tabs.nav-justified > li {
display: table-cell;
float: none; float: none;
width: 1%;
} }
.nav-tabs.nav-justified > li > a { .nav-tabs.nav-justified > li > a {
text-align: center; text-align: center;
} }
@media (min-width: 768px) {
.nav-tabs.nav-justified > li {
display: table-cell;
width: 1%;
}
}
.nav-tabs.nav-justified > li > a { .nav-tabs.nav-justified > li > a {
margin-right: 0; margin-right: 0;
border-bottom: 1px solid #dddddd; border-bottom: 1px solid #dddddd;
@ -3083,15 +3088,20 @@ button.close {
} }
.nav-justified > li { .nav-justified > li {
display: table-cell;
float: none; float: none;
width: 1%;
} }
.nav-justified > li > a { .nav-justified > li > a {
text-align: center; text-align: center;
} }
@media (min-width: 768px) {
.nav-justified > li {
display: table-cell;
width: 1%;
}
}
.nav-tabs-justified { .nav-tabs-justified {
border-bottom: 0; border-bottom: 0;
} }

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

File diff suppressed because one or more lines are too long

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

@ -27,8 +27,8 @@ body {
} }
/* Customize the nav-justified links to be fill the entire space of the .navbar */ /* Customize the nav-justified links to be fill the entire space of the .navbar */
.nav-justified { .nav-justified {
max-height: 52px;
background-color: #eee; background-color: #eee;
border-radius: 5px; border-radius: 5px;
border: 1px solid #ccc; border: 1px solid #ccc;
@ -39,8 +39,7 @@ body {
color: #777; color: #777;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
border-left: 1px solid rgba(255,255,255,.75); border-bottom: 1px solid #d5d5d5;
border-right: 1px solid rgba(0,0,0,.1);
background-color: #e5e5e5; /* Old browsers */ background-color: #e5e5e5; /* Old browsers */
background-repeat: repeat-x; /* Repeat the gradient */ background-repeat: repeat-x; /* Repeat the gradient */
background-image: -moz-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%); /* FF3.6+ */ background-image: -moz-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%); /* FF3.6+ */
@ -59,16 +58,32 @@ body {
box-shadow: inset 0 3px 7px rgba(0,0,0,.15); box-shadow: inset 0 3px 7px rgba(0,0,0,.15);
} }
.nav-justified > li:first-child > a { .nav-justified > li:first-child > a {
border-left: 0; border-radius: 5px 5px 0 0;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
} }
.nav-justified > li:last-child > a { .nav-justified > li:last-child > a {
border-right: 0; border-bottom: 0;
border-top-right-radius: 5px; border-radius: 0 0 5px 5px;
border-bottom-right-radius: 5px;
} }
@media (min-width: 768px) {
.nav-justified {
max-height: 52px;
}
.nav-justified > li > a {
border-left: 1px solid #fff;
border-right: 1px solid #d5d5d5;
}
.nav-justified > li:first-child > a {
border-left: 0;
border-radius: 5px 0 0 5px;
}
.nav-justified > li:last-child > a {
border-radius: 0 5px 5px 0;
border-right: 0;
}
}
/* Responsive: Portrait tablets and up */ /* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {

12
less/navs.less
View File

@ -154,14 +154,20 @@
.nav-justified { .nav-justified {
width: 100%; width: 100%;
> li { > li {
float: none; float: none;
display: table-cell; > a {
width: 1%;
> a {
text-align: center; text-align: center;
} }
} }
@media (min-width: @screen-small) {
> li {
display: table-cell;
width: 1%;
}
}
} }
// Move borders to anchors instead of bottom of list // Move borders to anchors instead of bottom of list