Bootstrap: 下拉菜单不会换行

Question

我正在尝试创建一个表单，但出于某种原因，我无法让多个下拉菜单正确显示一个在另一个下方。这是我的代码：

            <div class="form-group" style="display: block;">
            <label for="step1.1" class="control-label col-md-3 col-sm-3 col-xs-4">Label 1</label>
            <div class="col-md-4 col-sm-4 col-xs-8">
                <select name="data[step1][1]" class="form-control col-md-7 col-xs-12"
                        id="step1.1">

                    <option value="1">1</option>
                    <option value="x">X</option>
                </select>
            </div>
        </div>
        <div class="form-group" style="display: block;">
            <label for="step1.2" class="control-label col-md-3 col-sm-3 col-xs-4">Label 2</label>
            <div class="col-md-4 col-sm-4 col-xs-8">
                <select name="data[step1][2]" class="form-control col-md-7 col-xs-12"
                        id="step1.2">

                    <option value="2">2</option>
                    <option value="x">X</option>
                </select>
            </div>
        </div>

我不知道我做错了什么...

Answer 1

您可以通过以下 2 种方式完成此操作：http://pastebin.com/XivnbbHE

我不确定您是希望这些元素彼此内联，还是一个在另一个之上，所以我将两者都包括在内。您可以使用 bootstrap class inline 或 form-inline 来实现此目的。对于第一个，选择非常狭窄。您可以修复 css。

Answer 2

在您使用 Bootstrap 时，它的网格系统有 12 列。因此，要正确地将下拉列表显示到下一行，即在另一行下方，您必须完成所有 12 行。

在您的代码中，您使用 3 列 (col-md-3) 作为标签，使用 4 列 (col-md-4) 作为 select 框。所以总数是 3+4=7，因此还剩下 5 列。所以不使用col-md-4，而是使用col-md-9来完成网格

这是正确的代码：-

<div class="form-group" style="display: block;">
 <label for="step1.1" class="control-label col-md-3 col-sm-3 col-xs-4">Label 1</label>
 <div class="col-md-9 col-sm-9 col-xs-8">
  <select name="data[step1][1]" class="form-control col-md-7 col-xs-12"
   id="step1.1">
   <option value="1">1</option>
   <option value="x">X</option>
  </select>
 </div>
</div>
<div class="form-group" style="display: block;">
 <label for="step1.2" class="control-label col-md-3 col-sm-3 col-xs-4">Label 2</label>
 <div class="col-md-9 col-sm-9 col-xs-8">
  <select name="data[step1][2]" class="form-control col-md-7 col-xs-12"
   id="step1.2">
   <option value="2">2</option>
   <option value="x">X</option>
  </select>
 </div>
</div>

Answer 3

Bootstrap 使用 12 列布局，参见 Bootstrap 网格示例 here

在您的情况下，您使用 col-md-3 作为标签，使用 col-md-4 作为输入，因此这形成了 7 个网格。您应该使用 col-md-4 和 col-md-8 或完成 12 个网格的东西。 sm 和 xs

也一样

尝试http://shoelace.io检查网格。

Bootstrap: 下拉菜单不会换行

Bootstrap: Dropdown won't go on a new line

html

twitter-bootstrap-3

dropdown