html - Btn-group 不拉伸(stretch)表格的宽度

Question

我有一个带有表头和表行的表。标题是一个 btn 组，有 12 个按钮，类似于日历的月份，行有 31 列。我希望 btn-group 均匀分布并拉伸(stretch)表格行的整个宽度。我可以将 style="width:100px;" 添加到每个按钮，但这不是响应式的，而且我不一定知道整个表格的宽度。

任何人都可以看到我需要添加到我的代码中的内容吗？

<thead>
    <tr>
      <th colspan="31">
        <div class="btn-toolbar" role="toolbar">
          <div class="btn-group">
            <button type="button" class="btn btn-default">Jan</button>
            <button type="button" class="btn btn-default">Feb</button>
            <button type="button" class="btn btn-default">Mar</button>
            <button type="button" class="btn btn-default active">Apr</button>
            <button type="button" class="btn btn-default">May</button>
            <button type="button" class="btn btn-default">Jun</button>
            <button type="button" class="btn btn-default">Jul</button>
            <button type="button" class="btn btn-default">Aug</button>
            <button type="button" class="btn btn-default">Sep</button>
            <button type="button" class="btn btn-default">Oct</button>
            <button type="button" class="btn btn-default">Nov</button>
            <button type="button" class="btn btn-default">Dec</button>
          </div>
        </div>
      </th>
    </tr>
  </thead>

这是我从 Bootstrap 3 默认值更改的 css 标签:

.btn-组{ 宽度:100%；

.btn-工具栏{ 宽度:100%；

如果我使用 btn-group-justified，它看起来像这样:

Answer 1

将以下类添加到父容器:.btn-group-justified

<thead>
<tr>
  <th colspan="31">
    <div class="btn-toolbar" role="toolbar">
      <div class="btn-group btn-group-justified">
        <button type="button" class="btn btn-default">Jan</button>
        <button type="button" class="btn btn-default">Feb</button>
        <button type="button" class="btn btn-default">Mar</button>
        <button type="button" class="btn btn-default active">Apr</button>
        <button type="button" class="btn btn-default">May</button>
        <button type="button" class="btn btn-default">Jun</button>
        <button type="button" class="btn btn-default">Jul</button>
        <button type="button" class="btn btn-default">Aug</button>
        <button type="button" class="btn btn-default">Sep</button>
        <button type="button" class="btn btn-default">Oct</button>
        <button type="button" class="btn btn-default">Nov</button>
        <button type="button" class="btn btn-default">Dec</button>
      </div>
    </div>
  </th>
</tr>

要获得更多引用，请阅读文档的以下部分:

http://getbootstrap.com/components/#btn-groups-justified