twitter-bootstrap - 引导程序：表格超出边界

Question

我正在尝试在模态中的井内制作表格。这是一段代码：

<div class="modal-body">
<form class="form-horizontal">
    <form class="well form-inline">
        <label><h5>rtu</h5></label>
        <table class="table table-bordered">
            <tr>
                <th>mid</th>
                <th>type</th>
                <th>inverce</th>
                <th>mbaddr</th>
                <th>din_reg_offset</th>
                <th>din_type</th>
                <th>dout_reg_offset</th>
                <th>dout_type</th>
                <th>ain_reg_offset</th>
                <th>ain_type</th>
                <th>aout_reg_offset</th>
                <th>aout_type</th>
                <th>float_type</th>
            </tr>
            <tr>
                <td><input type="text" id="mid"></td>
                <td><input type="text" id="type"></td>
                <td><input type="text" id="inverce"></td>
                <td><input type="text" id="mbaddr"></td>
                <td><input type="text" id="din_reg_offset"></td>
                <td><input type="text" id="din_type"></td>
                <td><input type="text" id="dout_reg_offset"></td>
                <td><input type="text" id="dout_type"></td>
                <td><input type="text" id="ain_reg_offset"></td>
                <td><input type="text" id="ain_type"></td>
                <td><input type="text" id="aout_reg_offset"></td>
                <td><input type="text" id="aout_type"></td>
                <td><input type="text" id="float_type"></td>
            </tr> 
        </table>
    </form>
</form>

但是桌子不适合井的边界。像这样：

但我想要这样的东西： 我做错了什么？谢谢。

Answer 1

您的表格标记不正确。它应该遵循这种格式。

<table>
 <tr>
  <th>Month</th>
  <th>Savings</th>
 </tr>
 <tr>
  <td>January</td>
  <td>$100</td>
 </tr>
</table>

（来自http://www.w3schools.com/tags/tag_table.asp）

Answer 2

您可以使用class="input-mini"或class="input-small"在您的输入上使它们更小。但是您的表格将始终具有固定的最小宽度，其中包含您的输入，并且well将根据其周围的内容调整大小。您可能仍然会在小浏览器窗口中遇到问题。