Question

假设我在bootstrap中使用select控件定义下表：

<table>
<tr>
<td style="width: 95%;"></td>    
<td>
<select class="selectpicker form-control" name="filterBy">
    <option value="0" selected="selected">All Ages</option>
    <option value="32">0-3 Years</option>
    <option value="33">3-6 Years</option>
    <option value="34">6-9 Years</option>
    <option value="35">9-12 Years</option>
    <option value="36">12-15 Years</option>
    <option value="37">15-18 Years</option>
</select>
</td>
</tr>
</table>

如何强制选择足够大以使全文“All Ages”完全可见？

使用bootstrap 3.3.7

Answer 1

如果您对宽度设置为95％的其他td的维度不感兴趣，可以width: max-content;使用.selectpicker根据其子项需求获取最大宽度。

.selectpicker{
width: max-content !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table>
<tr>
<td style="width: 95%;"></td>    
<td>
<select class="selectpicker form-control" name="filterBy">
    <option value="0" selected="selected">All Ages</option>
    <option value="32">0-3 Years</option>
    <option value="33">3-6 Years</option>
    <option value="34">6-9 Years</option>
    <option value="35">9-12 Years</option>
    <option value="36">12-15 Years</option>
    <option value="37">15-18 Years</option>
</select>
</td>
</tr>
</table>

希望这有帮助

强制选择足够宽以显示所选元素

1 个答案: