Html 引导表中的输入宽度始终使用最大宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21725576/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Input width in bootstrap table always using max width
提问by Ingó Vals
Ok I was trying to do a table with input fields. To set the sizes of each field I understood that I had to set the col-size in the header.
好的，我试图做一个带有输入字段的表格。要设置每个字段的大小，我知道我必须在标题中设置 col-size。
<thead>
<tr>
<th class="col-sm-2">Large</th>
<th class="col-sm-2">Large</th>
<th class="col-sm-1">Small</th>
<th class="col-sm-2">Large</th>
<th class="col-sm-1">Small</th>
<th class="col-sm-2">Large</th>
<th class="col-sm-2">Large</th>
</tr>
</thead>
However the inputs expand to their max width with no regard to col-size.
然而，输入扩展到它们的最大宽度，而不考虑 col-size。
Possibly this is an improper use of Bootstrap but I saw it as a best bet for inline inputs with headers above.
可能这是 Bootstrap 的不当使用，但我认为它是带有上述标题的内联输入的最佳选择。
Also, lets say I want this particular grid to have 18 columns instead of the default 12 is that possible here just in this particular case?
另外，假设我希望这个特定的网格有 18 列而不是默认的 12 列，这在这种特殊情况下可能吗？
回答by Lifes
Just add the "form-control" class to the inputs and bootstrap takes care of the rest.
只需将“表单控制”类添加到输入中，引导程序会负责其余的工作。
Doing it this way makes it easier to add columns or change the width, since you only have to change in the header as opposed to every row/input.
这样做可以更轻松地添加列或更改宽度，因为您只需更改标题而不是每一行/输入。
<table class="table table-condensed">
<thead>
<tr>
<th class="col-sm-12 col-md-4">Large</th>
<th class="col-sm-12 col-md-2">Small</th>
<th class="col-sm-12 col-md-2">Small</th>
<th class="col-sm-12 col-md-2">Small</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control" />
</td>
<td>
<input type="text" class="form-control" />
</td>
<td>
<input type="text" class="form-control" />
</td>
<td>
<input type="text" class="form-control" />
</td>
</tr>
</tbody>
</table>
回答by Arun
You need to use the class col-md-*for normal screens col-sm-*for tablet screen and col-xs-*for mobile screen, there is also col-lg-*for larger screens, you can combine all these classes to make it responsive, like:
您需要在平板电脑屏幕和移动屏幕的col-md-*普通屏幕上使用该类，对于更大的屏幕，您可以组合所有这些类以使其具有响应性，例如：col-sm-*col-xs-*col-lg-*
<div class="row">
<div class="col-sm-12">
<table class="table table-bordered">
<thead>
<tr>
<th>Very Small</th>
<th>Very Small</th>
<th>Very Small</th>
<th>Large</th>
<th>Small</th>
<th>Medium</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-1">
<input class="col-sm-12" placeholder="col-sm-1" />
</td>
<td class="col-sm-1">
<input class="col-sm-12" placeholder="col-sm-1" />
</td>
<td class="col-sm-1">
<input class="col-sm-12" placeholder="col-sm-1" />
</td>
<td class="col-sm-4">
<input class="col-sm-12" placeholder="col-sm-4" />
</td>
<td class="col-sm-2">
<input class="col-sm-12" placeholder="col-sm-2" />
</td>
<td class="col-sm-3">
<input class="col-sm-12" placeholder="col-sm-3" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
回答by serv-inc
For Bootstrap 4, you need to additionally add the d-flexclass to the rows, like
对于 Bootstrap 4，您还需要将d-flex类添加到行中，例如
<table> <thead> <tr class="d-flex"> <th class="col-3">3 columns wide header</th> <th class="col-sm-5">5 columns wide header</th> <th class="col-sm-4">4 columns wide header</th> </tr> </thead> <tbody> <tr class="d-flex"> <td class="col-3">3 columns wide content</th> <td class="col-sm-5">5 columns wide content</th> <td class="col-sm-4">4 columns wide content</th> </tr> </tbody> </table>
<table> <thead> <tr class="d-flex"> <th class="col-3">3 columns wide header</th> <th class="col-sm-5">5 columns wide header</th> <th class="col-sm-4">4 columns wide header</th> </tr> </thead> <tbody> <tr class="d-flex"> <td class="col-3">3 columns wide content</th> <td class="col-sm-5">5 columns wide content</th> <td class="col-sm-4">4 columns wide content</th> </tr> </tbody> </table>
