Html Bootstrap <select> 宽度，调整窗口大小时内容太宽
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28835147/
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
Bootstrap <select> width, content too wide when resizing window
提问by Viktor Mellgren
How can i make the dropdown the size to fit the content (in my case it happens when shrinking the browser to less than some certain size, then content start to dissapear? I preferably do not want any custom css, anything built in to bootstrap to support this?
我怎样才能使下拉菜单的大小适合内容（在我的情况下，它发生在将浏览器缩小到小于某个特定大小时，然后内容开始消失？我最好不要任何自定义 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>回答by Ted
Option 1:You can add width:autoto the select, although then it will always size to fit the longest content, and ignore your colclass. See the snippet:
选项 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>Option 2would be to use an inline form, see this bootplyfor a functioning example
选项 2是使用内联表单，有关功能示例，请参阅此引导程序
回答by xandermonkey
Old question, new answer. You can set the class to w-autoin bootstrap 4.
老问题，新答案。您可以w-auto在引导程序 4中将类设置为。
回答by pherris
You might consider using bootstrap's dropdown widgetwhich will allow wrapping http://jsfiddle.net/g4s59a9a/:
您可能会考虑使用引导程序的下拉小部件，它允许包装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>
