Question

如何使下拉大小适合内容（在我的情况下，当浏览器缩小到某个特定大小时会发生内容，然后内容开始消失？我最好不要任何自定义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>&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

Answer 2

你可以考虑使用bootstrap的dropdown widget，这将允许包裹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>

Answer 3

新答案

引导程序 v5

您可以将选择元素放入容器中：

  <div class="container w-25">
    <select class="form-select  h-100 w-100" aria-label="">
      <option>Images</option>
    </select>
  </div>

Answer 4

旧问题，新答案。您可以在引导程序4中将类设置为w-auto。

调整窗口</select>时，Bootstrap <select>宽度，内容太宽

4 个答案:

新答案