html - Bootstrap <select> 宽度，调整窗口大小时内容太宽

Question

我怎样才能使下拉菜单的大小适合内容(在我的例子中，当浏览器缩小到小于某个特定大小时会发生这种情况，然后内容开始消失？我最好不要任何自定义 css，任何内置的东西 Bootstrap 支持这个？

 <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>&nbsp;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>

Answer 1

选项 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>&nbsp;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 是使用内联表单，请参阅 this bootply一个功能示例