CSS将Bootstrap选项卡控件（水平选项卡）的文本内容放置在选项卡下 - 排除标签周围的文本

以下html代码包含引导选项卡控件。在我的示例中，我有几个嵌套的Bootstrap选项卡控件。第一个（最左边的）选项卡包含一个带有3个水平选项卡的嵌套选项卡控件。第二个选项卡包含一个嵌套的Tab控件，并带有3个垂直对齐的选项卡第3个和第4个标签只包含纯文本内容。我遇到的问题是，对于水平制表符（嵌套和非嵌套），文本内容显示在与制表符（水平对齐制表符）相同的级别上 - 文本环绕制表符。我想要显示水平排列的标签“Underneath”的内容，各个标签不包裹标签。什么是CSS来完成这个？CSS将Bootstrap选项卡控件（水平选项卡）的文本内容放置在选项卡下 - 排除标签周围的文本

<html> 
<head> 
    <title></title> 
    <link rel="stylesheet prefetch" href="bootstrap.min.css" /> 
    <script type="text/javascript" src="jquery.min.js"></script> 
    <script type="text/javascript" src="bootstrap.min.js"></script> 

    <style type="text/css"> 

    .tab-content > .tab-pane, 
    .pill-content > .pill-pane { 
     display: none; 
    } 

    .tab-content > .active, 
    .pill-content > .active { 
     display: block; 
    }     

    .tabs-left > .nav-tabs > li { 
     float: none; 
    } 

    .tabbable > .nav-tabs > li > a { 
     min-width: 74px; 
     margin-right: 0; 
     margin-bottom: 3px; 
    } 

    .tabbable > .nav-tabs { 
     float: left; 
     margin-right: 19px; 
     border-right: 1px solid #ddd; 
    } 

    .tabbable > .nav-tabs > li > a { 
     margin-right: -1px; 
     -webkit-border-radius: 4px 0 0 4px; 
     -moz-border-radius: 4px 0 0 4px; 
       border-radius: 4px 0 0 4px; 

    } 

    .tabbable > .nav-tabs .active > a, 
    .tabbable > .nav-tabs .active > a:hover, 
    .tabbable > .nav-tabs .active > a:focus {         
     border-color: red blue red red; 
     *border-right-color: lime; 
     background-color: lime; 
    } 

    .tabbable > .nav > li > a:hover { 
     background-color: red; 
    } 

    .tabbable > .nav > li > a { 
     background-color: orange; 
    } 

    .tab-content { 
     color: red; 
     } 




    </style> 
</head> 
<body> 
<form> 

    <div class="container"> 

     <div class="col-md-6"> 
      <h3>Tabs</h3> 

      <div class="tabbable"> 
       <ul class="nav nav-tabs"> 
       <li class="active"><a href="#one" data-toggle="tab"><b>OneA abcdefg</b></a></li> 
       <li><a href="#two" data-toggle="tab"><b>TwoA</b></a></li> 
       <li><a href="#twee" data-toggle="tab"><b>ThreeA</b></a></li> 
        <li><a href="#fourth" data-toggle="tab"><b>fourthA</b></a></li> 
       </ul> 
       <div class="tab-content"> 
       <div class="tab-pane active" id="one"> 


          <div class="tabbable tabs-top"> 
           <ul class="nav nav-tabs"> 
           <li><a href="#oneb" data-toggle="tab"><b>OneB</b></a></li> 
           <li class="active"><a href="#twob" data-toggle="tab"><b>TwoB</b></a></li> 
           <li><a href="#tweeb" data-toggle="tab"><b>ThreeB</b></a></li> 
           </ul> 
           <div class="tab-content"> 
           <div class="tab-pane" id="oneb">First Lorem ipsum dolor sit amet, charetra varius quam sit amet vulputate. 
           Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero.</div> 
           <div class="tab-pane active" id="twob">Secondo sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. 
           Aliquam in felis sit amet augue.</div> 
           <div class="tab-pane" id="tweeb">Third amuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
           Quisque mauris augue, molestie tincidunt condimentum vitae.</div> 
           </div> 
          </div> 



        </div> 

        <!-- ------------------- --> 

       <div class="tab-pane" id="two"> 

         <div class="col-md-7">   
          <!-- tabs left --> 
          <div class="tabbable tabs-left"> 
          <ul class="nav nav-tabs"> 
           <li><a href="#a" data-toggle="tab"><b>One</b></a></li> 
           <li class="active"><a href="#b" data-toggle="tab"><b>Two</b></a></li> 
           <li><a href="#c" data-toggle="tab"><b>Twee</b></a></li> 
          </ul> 
          <div class="tab-content"> 
          <div class="tab-pane" id="a">A) Lorem ipsum dolor sit amet, charetra varius </div> 
          <div class="tab-pane active" id="b">B) Secondo sed ac orci quis tortor imperdiet</div> 
          <div class="tab-pane" id="c">C) Thirdamuno, ipsum dolor sit amet, consectetur adipiscing elit. molestie tincidunt condimentum vitae. </div> 
          </div> 
          </div> 

         </div> 

       </div> 



       <div class="tab-pane" id="twee">Third amuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
       Quisque mauris augue, molestie tincidunt condimentum vitae.</div> 

       <div class="tab-pane" id="fourth">fourth amuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
       Quisque mauris augue, molestie tincidunt condimentum vitae.</div> 
       </div> 
      </div> 
      <!-- /tabs --> 
     </div> 
    </div> 
</form

来源

2017-05-08 Rich P

我由每个格的在相应的选项卡（内嵌
多个）文本之前加入一堆
S（像5）实现了我期望的结果。我认为这是做这件事的好办法。我怎样才能达到相同的效果使用CSS每个div？

来源

2017-05-08 23:03:47

这是br标签 - 我添加了br标签以将我的内容放置在相应（水平）选项卡下。 –

CSS将Bootstrap选项卡控件（水平选项卡）的文本内容放置在选项卡下 - 排除标签周围的文本

回答

相关问题