0

我正在使用带有两个标签的 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);
  
}

有什么建议么？

4

1 回答 1

1

“我需要 tab1 容器的宽度为 600px，tab2 的宽度为 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>

于 2021-07-23T12:47:00.517 回答