1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-31 00:59:51 +02:00

Address #9873 and fix #9774

* 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

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,