Question

以下html代码包含Bootstrap Tab控件。在我的示例中，我有一些嵌套的Bootstrap Tab控件。第一个（最左侧）选项卡包含一个嵌套的选项卡控件，其中包含3个水平选项卡。第二个选项卡包含嵌套的Tab控件，其中包含3个垂直对齐的选项卡。第3和第4个选项卡仅包含纯文本内容。我遇到的问题是，对于水平制表符（嵌套而非嵌套），文本内容显示在与制表符相同的级别（水平对齐的制表符） - 文本围绕制表符。我想显示水平对齐标签的内容＆＃34; Under the＆＃34;相应的标签没有环绕标签。什么是CSS来完成这个？

<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

Answer 1

我通过在相应标签中的每个div的文本之前添加一堆（如5）来实现我想要的结果（内联）。我认为这是做到这一点的好方法。如何使用CSS为每个div实现相同的效果？

用于在选项卡下放置Bootstrap Tab Control（水平选项卡）文本内容的CSS - 排除选项卡

1 个答案: