Bootstrap Nav Pills 内容宽度
Bootstrap Nav Pills content width
我正在使用 Bootstrap 有两个标签的药丸。我希望标签内容的容器具有不同的宽度。我不知道该怎么做。 tab-content 设置两个宽度。我需要 tab1 容器的宽度为 600px,tab2 的宽度为 800px。
<div class="container">
<ul class="nav nav-pills justify-content-center">
<li class="active">
<a href="#tab1" data-toggle="tab">First Tab</a>
</li>
<li><a href="#tab2" data-toggle="tab">Second Tab</a>
</li>
</ul>
<div class="tab-content clearfix">
<div class="tab-pane active" id="tab1" >
<h3>Same as example 1 but we have now styled the tab's corner</h3>
</div>
<div class="tab-pane" id="tab2">
<h3>We use the class nav-pills instead of nav-tabs which automatically creates a background color for the tab</h3>
</div>
</div>
</div>
Css:
.nav-pills > li {
float:none;
display:inline-block;
zoom:1;
}
.nav-pills {
text-align:center;
}
.nav-pills > li > a {
border-radius: 6px 6px 0 0 ;
background-color: #FFF;
color: black;
font-size: 13px;
font-family: 'Lato', sans-serif;
font-weight: 700;
padding: 7px 50px;
text-decoration: none;
margin-right: 20px;
}
.nav-pills > li.active > a {
background-color: #F5A000;
}
.tab-content {
margin-top: 4px;
padding : 5px 15px;
box-shadow: 0 2rem 2rem #00000080;
height:90px;
position: relative;
border-radius:0px 0px 8px 8px;
border-top: 3px solid #F5A000;
background-color: rgba(255, 255, 255, 0.5);
}
有什么建议吗?
"I need tab1 container to be 600px wide, and tab2 to be 800px."
两个选项卡共享一个 tab-content
容器。但是由于每个选项卡都有自己的 tab-pane
,您可以更改它的宽度。
.tab-pane {
padding: 5px 15px;
box-shadow: 0 2rem 2rem #00000080;
position: relative;
border-radius: 0px 0px 8px 8px;
border-top: 3px solid #F5A000;
background-color: rgba(255, 255, 255, 0.5);
}
#tab1 {
width: 600px;
}
#tab2 {
width: 800px;
}
https://codeply.com/p/DrJOw7Pf78
编辑:居中是一个单独的问题。只需在选项卡内容上使用 flexbox:
<div class="tab-content clearfix d-flex justify-content-center">..</div>
我正在使用 Bootstrap 有两个标签的药丸。我希望标签内容的容器具有不同的宽度。我不知道该怎么做。 tab-content 设置两个宽度。我需要 tab1 容器的宽度为 600px,tab2 的宽度为 800px。
<div class="container">
<ul class="nav nav-pills justify-content-center">
<li class="active">
<a href="#tab1" data-toggle="tab">First Tab</a>
</li>
<li><a href="#tab2" data-toggle="tab">Second Tab</a>
</li>
</ul>
<div class="tab-content clearfix">
<div class="tab-pane active" id="tab1" >
<h3>Same as example 1 but we have now styled the tab's corner</h3>
</div>
<div class="tab-pane" id="tab2">
<h3>We use the class nav-pills instead of nav-tabs which automatically creates a background color for the tab</h3>
</div>
</div>
</div>
Css:
.nav-pills > li {
float:none;
display:inline-block;
zoom:1;
}
.nav-pills {
text-align:center;
}
.nav-pills > li > a {
border-radius: 6px 6px 0 0 ;
background-color: #FFF;
color: black;
font-size: 13px;
font-family: 'Lato', sans-serif;
font-weight: 700;
padding: 7px 50px;
text-decoration: none;
margin-right: 20px;
}
.nav-pills > li.active > a {
background-color: #F5A000;
}
.tab-content {
margin-top: 4px;
padding : 5px 15px;
box-shadow: 0 2rem 2rem #00000080;
height:90px;
position: relative;
border-radius:0px 0px 8px 8px;
border-top: 3px solid #F5A000;
background-color: rgba(255, 255, 255, 0.5);
}
有什么建议吗?
"I need tab1 container to be 600px wide, and tab2 to be 800px."
两个选项卡共享一个 tab-content
容器。但是由于每个选项卡都有自己的 tab-pane
,您可以更改它的宽度。
.tab-pane {
padding: 5px 15px;
box-shadow: 0 2rem 2rem #00000080;
position: relative;
border-radius: 0px 0px 8px 8px;
border-top: 3px solid #F5A000;
background-color: rgba(255, 255, 255, 0.5);
}
#tab1 {
width: 600px;
}
#tab2 {
width: 800px;
}
https://codeply.com/p/DrJOw7Pf78
编辑:居中是一个单独的问题。只需在选项卡内容上使用 flexbox:
<div class="tab-content clearfix d-flex justify-content-center">..</div>