当嵌套表中的文本过长时，Boostrap主表单元格将收缩

Question

我创建了一个包含6列2行的Bootstrap表(不计算表头(；第一行包含6个带有一些文本和按钮的单元格，第二行包含1个colspan为6的单元格，并包含两个Bootstrap tooglass选项卡。第二个选项卡(称为"链接"(包含一个具有一行和两列的表。

当嵌套表第一列中的文本过长时，主表第一行的单元格会收缩，从而破坏按钮布局。这种情况发生在Firefox和Chrome中(Chrome中的单元格收缩较小(，但Safari中没有。当文本足够短时，单元格不会收缩。

我在最新Safari、Chrome和Firefox的MacBook Pro 13上测试了它。

这是代码和jsfiddle。你必须在全屏中运行jsfiddle，并且至少有一个13英寸的屏幕

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <table class="table">
        <tr>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
          <th>Column 4</th>
          <th>Column 5</th>
          <th>Column 6</th>
        </tr>
        <tr>
          <td>Some very random content</td>
          <td> <a class="btn btn-success btn-sm" target="_blank" href="">M</a>
            <a class="btn btn-primary btn-sm" target="_blank" href="">L</a>
            <a class="btn btn-default btn-sm" target="_blank" href="">Website</a>
          </td>
          <td>A description - A description A description...</td>
          <td>
            <div class="btn-group btn-group-md" role="group" aria-label="...">
              <div class="btn-group" role="group">
                <button class="btn btn-default">Save</button>
                <button class="btn btn-default">Blacklist</button>
                <button class="see-more btn btn-default">See more</button>
              </div>
            </div>
          </td>
          <td>
            <button class="btn btn-default btn-md">Button 3</button>
          </td>
          <td>
            <button class=" btn btn-default btn-md">Some long text</button>
          </td>
        </tr>
        <tr>
          <td colspan="6">
            <ul class="nav nav-tabs">
              <li role="presentation" class="general-tab active"> <a data-toggle="tab" href="#general">General</a>
              </li>
              <li role="presentation" class="links-tab"> <a data-toggle="tab" href="#links">Links</a>
              </li>
            </ul>
            <div class="tab-content">
              <div role="tabpanel" class="tab-pane active" id="general">Some content</div>
              <div role="tabpanel" class="tab-pane" id="links">
                <div class="row">
                  <div class="col-md-8">
                    <table class="table">
                      <tr>
                        <th class="col-md-4">Col 1</th>
                        <th class="col-md-4">Col 2</th>
                      </tr>
                      <tr>
                        <td class="col-md-4">This text shrinks the parent table columns. This text shrinks the parent table columns. This text shrinks the parent table columns. This text shrinks the parent table columns.</td>
                        <td class="col-md-4">This is some random content. This is some random content. This is some random content</td>
                      </tr>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </td>
        </tr>
      </table>
    </div>
  </div>
</div>

Answer 1

单元格宽度根据表中其他单元格的内容进行调整。如果一行的内容太多，无法在单行上显示，则可能会导致某些单元格的元素换行，具体取决于单元格的换行能力。

如果你不想让按钮换行，我建议给父单元格一个最小宽度(例如<td style="min-width: 160px">。我已经用这个答案更新了你的jsfiddle。