Question

我正在使用twitter bootstrap制作Togglable标签。（http://getbootstrap.com/javascript/#tabs）我想知道如何使标签均匀地到达div的整个长度，而不是过早地停止并留下一条线。另外，如何使标签均匀分布？

enter image description here

HTML：

<body class="wrap">

    <div id="configNav">
        <ul class="nav nav-tabs" role="tablist">
          <li class="active"><a href="#windowsXP_tab" role="tab" data-toggle="tab">XP</a></li>
          <li><a href="#windows7_tab" role="tab" data-toggle="tab">7</a></li>
          <li><a href="#windows8_tab" role="tab" data-toggle="tab">8</a></li>
          <li><a href="#windows8_1_tab" role="tab" data-toggle="tab">8.1</a></li>
          <li><a href="#OSX10_6_tab" role="tab" data-toggle="tab">10.6</a></li>
          <li><a href="#OSX10_8_tab" role="tab" data-toggle="tab">10.8</a></li>
          <li><a href="#OSX10_9_tab" role="tab" data-toggle="tab">10.9</a></li>
        </ul>

        <!-- Tab panes -->
        <div class="tab-content">
          <div class="tab-pane active" id="windowsXP_tab">windows XP</div>
          <div class="tab-pane" id="windows7_tab">windows 7</div>
          <div class="tab-pane" id="windows8_tab">windows 8</div>
          <div class="tab-pane" id="windows8_1_tab">windows 8.1</div>
          <div class="tab-pane" id="OSX10_6_tab">osx 10.6</div>
          <div class="tab-pane" id="OSX10_8_tab">osx 10.8</div>
          <div class="tab-pane" id="OSX10_9_tab">osx 10.9</div>
        </div>
    </div>

CSS：

.wrap {
   width: 1200px;
   margin:0 auto;

}
.left_col {
   float:left;
   width:300px;
}
.right_col {
   float:right;
   width:300px;
}

#configNav {
    width: 600px;
    margin: 0 auto;
}

Answer 1

我以前能够使用display: table和display: table-cell对项目进行横向展开UL。

我发现某些IE上的兼容性问题＆lt; 9

#configNav > ul {
    display: table;
    width: 100%;
    table-layout: fixed;
    }

#configNav > ul > li {
    display: table-cell;
    float: none;
    }

/* Override bootstrap styles */
#configNav > ul:before,
#configNav > ul:after {
    display: none;
    }

Twitter bootstrap可切换标签的长度和间距

1 个答案: