Question

我创建了一个包含6列和2行的Bootstrap表（不计算标题）;第一行包含6个带有一些文本和按钮的单元格，第二行包含一个colspan为6的单元格，并包含两个Bootstrap tooglable选项卡。第二个选项卡（称为“链接”）包含一个包含一行和两列的表。

当嵌套表的第一列中的文本太长时，主表的第一行的单元格缩小，打破按钮布局。这种情况发生在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。

当嵌套表中的文本太长时，Boostrap主表单元格会缩小

1 个答案: