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

【问题标题】：Twitter bootstrap togglable tabs length and spacingTwitter bootstrap 可切换标签的长度和间距
【发布时间】：2014-10-22 07:44:05
【问题描述】：

我正在使用 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;
}

【问题讨论】：

使用对齐的导航标签：getbootstrap.com/components/#nav-justified

标签： html css twitter-bootstrap

【解决方案1】：

我之前能够做的是在项目上使用display: table 和display: table-cell 来水平展开任何UL。

我在某些 IE 上看到了兼容性问题

#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;
    }

【讨论】：