我对引导程序非常陌生,我正在扩展一个现有的 MVC Web 应用程序,该应用程序通过添加一个带有表单输入字段的表来使用引导程序 4。我想弄清楚如何控制表格列宽。一个下拉列表有很长的选项,所以我希望能够限制该列的大小并溢出/换行下拉列表中的文本,但我什至无法调整空表的大小。这是页面的现有 div 结构和我放入的虚拟表格,其结构与真实表格相同。
<div class="form-horizontal col-10 offset-1">
<div class="row">
<h5 class="mt-n1 pl-1">Section title</h5>
</div>
<div class="row" style="background-color:#e8eef4; border: 1px solid #d2d2d2; border-radius: 3px; padding-top: 4px;">
<table class="table table-borderless table-condensed">
<thead>
<tr>
<th class="col-3">Column 1</th>
<th class="col-6">Column 2</th>
<th class="col-3">Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select class="form-control">
<option>Select...</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
</td>
<td>
<select class="form-control">
<option>Select...</option>
<option>An example of the really long text for the select option that will need to overflow.</option>
<option>Another example of the really long text for the select option that will need to overflow.</option>
</select>
</td>
<td>
<textarea class="form-control" cols=20 rows=2></textarea>
</td>
</tr>
</tbody>
</table>
</div>
</div>
这无法以我期望的方式控制列宽。我已阅读有关将 container
类添加到其中一个 div 以允许控制列宽的内容,但我不确定要将其添加到哪个 div。我还阅读了有关使用 table-responsive
类的信息,但我希望没有滚动表。您能提供的任何帮助将不胜感激。
https://codeply.com/v/fT9xOWEToJ
答案 0 :(得分:0)
您需要为每个 col-
和 <th>
设置 <td>
,而不仅仅是 <th>
。此外,添加 d-flex
以启用弹性行为。
这是 <table>
代码块的修改版本:
<table class="table table-borderless table-condensed">
<thead>
<tr class="d-flex">
<th class="col-3">Column 1</th>
<th class="col-6">Column 2</th>
<th class="col-3">Column 3</th>
</tr>
</thead>
<tbody>
<tr class="d-flex">
<td class="col-3">
<select class="form-control">
<option>Select...</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
</td>
<td class="col-6">
<select class="form-control">
<option>Select...</option>
<option>An example of the really long text for the select option that will need to overflow.</option>
<option>Another example of the really long text for the select option that will need to overflow.</option>
</select>
</td>
<td class="col-3">
<textarea class="form-control" cols="20" rows="2"></textarea>
</td>
</tr>
</tbody>
</table>