Question

我遇到了一个问题，我将标签内容保存在bootstrap容器类中，我希望全宽导航标签的标签与左侧对齐。但是我想把nav-tabs第一个li tab项与tab-content对齐。请看看我在codepen中创建的示例：

点击here访问CodePen。

＆＃13;

body{padding-top:5px;}
.navTabsParent{}
.nav-tabs.nav-justified > .active > a{
background-color: #D7E1EA;
border: 0px solid #DDD;
}
.nav-tabs.nav-justified > li > a{
  border-radius:0 !important;
}
.nav-tabs > li.active > a{color:#182E79;font-weight:bold;}
.tabOneLink,.tabTwoLink{text-align:left !important;}

.main-content-body{background-color: #D7E1EA;}

＆＃13;

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid navTabsParent">
  <div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
      <ul class="nav nav-tabs nav-justified ">
    <li class="active"><a data-toggle="tab" class="tabOneLink" href="#tab1"><p>Tab One</p></a></li>
    <li><a data-toggle="tab" class="tabTwoLink" href="#tab2">
      <p>Tab Two</p></a></li>
  </ul>
      <div class="main-content-body">
        <div class="container">
          <div class="row">
            <div class="col-md-12 col-sm-12">
            <div class="tab-content">
		<div id="tab1" class="tab-pane fade in active">
      	<h2>Tab 1:</h2>
			      <h4>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</h4>
              </div> <!--End of #tab1 -->
           	<div id="tab2" class="tab-pane fade in">
      	<h2>Tab 2:</h2>
			      <h4>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</h4>
              </div> <!--End of #tab2 -->

              
              </div> <!--End of .tab-content -->
              </div> <!--End of .col-12 -->
          </div> <!--end .row --> 
        </div> <!--end .container -->
      </div> <!--Main Content body -->
    </div> <!--End of .col-12 -->
  </div> <!--End of .row -->
</div> <!--End of .container-fluid -->

＆＃13;

View that i want

Answer 1

我将col-lg-6添加到具有id="tab1"的div的class属性中，并且该内容现在适合于＆＃34;标签1＆＃34;元件。接下来，我从tab1上方的div中删除了class="tab-content"，并且tab2信息适用于＆＃34;标签2＆＃34;。

此外，每个div不要使用多个col-XX-##（例如col-lg-6），因为这样做没有任何意义。帮自己一个忙，并回顾一下bootstrap中的网格系统是如何工作的。

My revision of your code

如何将bootstrap容器类中保留的选项卡内容与全角度nav-tabs li项对齐

1 个答案: