我怎样才能使下拉菜单的大小适合内容(在我的情况下,当将浏览器缩小到小于某个特定大小时,就会发生这种情况,然后内容开始消失?我最好不要任何自定义CSS,任何内置到引导程序中的内容支持这个吗?
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form class="form-horizontal" role="form" enctype="multipart/form-data" id="inputForm" name="inputForm" novalidate>
<div class="well">
<div class="form-group">
<label class="col-xs-3 control-label"><strong>4.</strong> Select thing</label>
<div class="col-xs-2">
<select class="form-control">
<option>Short
</option>
<option>Medium lenght
</option>
<option>Much much much longer text not fitting when resizing
</option>
</select>
</div>
</div>
</div>
</form>
选项 1: 您可以将
width:auto
添加到选择中,尽管这样它的大小将始终适合最长的内容,并忽略您的 col
类。请参阅片段:
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form class="form-horizontal" role="form" enctype="multipart/form-data" id="inputForm" name="inputForm" novalidate>
<div class="well">
<div class="form-group">
<label class="col-xs-3 control-label"><strong>4.</strong> Select thing</label>
<div class="col-xs-2">
<select class="form-control" style="width:auto;">
<option>Short
</option>
<option>Medium lenght
</option>
<option>Much much much longer text not fitting when resizing
</option>
</select>
</div>
</div>
</div>
</form>
选项 2 将使用内联表单,请参阅 此 bootply 了解功能示例
老问题,新答案。您可以在 bootstrap 4 中将类设置为
w-auto
。
引导程序v5
您可以将选择的元素放入容器中:
<div class="container w-25">
<select class="form-select h-100 w-100" aria-label="">
<option>Images</option>
</select>
</div>
您可能会考虑使用引导程序的下拉小部件,它将允许包装http://jsfiddle.net/g4s59a9a/:
<div class="dropdown">
<button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown trigger
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li role="presentation" class="dropdown">
<a role="menuitem" tabindex="-1" href="#">
Much much much longer text not fitting when resizing
</a>
</li>
<li role="presentation" class="dropdown">
<a role="menuitem" tabindex="-1" href="#">
Smaller text
</a>
</li>
</ul>
</div>