Twitter Bootstrap 表调整大小，行溢出答案

【问题标题】：Twitter Bootstrap table resize , row overflowTwitter Bootstrap 表调整大小，行溢出
【发布时间】：2017-02-03 19:06:26
【问题描述】：

我被 twitter bootstrap 中的表格卡住了。无论我尝试什么，我都无法在跨度内获得我的表格，我认为这与引导 CSS 有关，我需要我的表格行在跨度或 hero-unit 内对齐。

<div class="table-responsive">
  <table  id="table" 
          class="table table-bordered table-condensed table-striped form-group">
    <tbody>
       <tr>
         <th>Sl. No.</th>
         <th class="">Name</th>
         <th>C/NC</th>
         <th class="">Quantity</th>
         <th>Price</th>
         <th><input type="button" class="btn btn-success" id="addmorebutton" 
                    value="Add" onclick="addRow();"/></th>
      </tr>
      <tr id="templateRow">
        <td><input type="text" placeholder="In Words"></td>
        <td class=""><input type="text" placeholder="In Words"></td>
        <td>
           <select class="input-sm col-lg-2">
              <option>Consumable</option>
              <option>Non Consumable</option>
           </select>
        </td>
        <td class=""><input type="text" placeholder="In Numbers"></td>
        <td><input type="text" placeholder="In Numbers"></td>
        <td><input type="button" class="btn btn-danger" id="addmorebutton" 
                   value="Delete" onclick="delRow(this);"/></td>
     </tr>
   </tbody>
 </table>
</div>

【问题讨论】：

你有测试站点的链接吗？从你提供的代码中我看不出任何东西
你必须使用表格吗？ Bootstrap 自带网格系统getbootstrap.com/css/#grid-options

标签： css twitter-bootstrap resize html-table

【解决方案1】：

如果您尝试通过设置父 span 元素的样式来定位 table，则需要将 span 设置为块级元素。 Span 本质上不是块级元素；因此，它会折叠并且不会包含页面流中的表格。使用block 或inline-block 是更改跨度以正确包含的方法之一。然而，为了更容易，您始终可以使用块级元素开头，例如 div 或设置表格本身的样式。

在您的<span> CSS 上尝试display:block;。这将强制它包含其子元素。

没有更多信息，很难理解您要完成的工作。更多关于块级元素的信息：https://developer.mozilla.org/en-US/docs/HTML/Block-level_elements

【讨论】：