Bootstrap 列表现异常

Question

所以我正在为学校创建一个练习，这样老师就可以填写一份表格，为他们的学生进行练习。现在我正在尝试使用引导列来使事情看起来更好，更容易理解，我打算采用这种格式：

SELECT1 - 问题

选择2

现在我想我可以通过给 SELECT1 一个 col-md-3、QUESTION 一个 col-md-7 和 SELECT2 一个 col-md-10 来实现这一点，这也为它们显示的内容提供了适当的长度。现在由于某种原因，这会将它们垂直堆叠，同时为它们提供给定 cols 的适当长度。更奇怪的是，如果我将 SELECT2 缩短为 col-md-3 之类的 SELECT1，它会将 QUESTION 和 SELECT2 放在同一行。我尝试将它们放入带有类 form-inline 的表单中，但不知怎的就变成了这样：

问题 - 选择 1

选择2

这对我来说更没有意义。我应该注意这都在一行内，该行在一个类内，其样式为左右 10px 填充，位于容器内的面板面板主体内。

这是相关的 HTML 代码，它们都只是垂直堆叠：

<span id="spanid">
 <div class="form-group input-group col-md-3">
  <select class="form-control">
   <option disabled="" selected="">Choose</option> 
   <option>Option 1</option>
   <option>Option 2</option>
  </select>
 </div>
 <div class="well well-sm col-md-7">
  <h5 id="eQuestion">A question</h5>
 </div>
 <div class="form-group input-group col-md-10">
  <select class="form-control">
   <option disabled="" selected="">Choose the correct answer</option>
   <option>Option 1</option>
   <option>Option 2</option>
</span>

TL;DR：为了达到建议的目的，我该如何修复我的代码以使我的页面看起来像这样：

SELECT1 - 问题

选择2

编辑新代码：

<span id="vqaspan" class="row">
 <div class="form-group col-md-3">
  <select class="form-control">
   <option disabled="" selected="">Choose</option>
  </select>
 </div>
 <div class="well well-sm col-md-7">
  <h5 id="eQuestion">Question</h5>
 </div><div class="form-group col-md-10">
 <select class="form-control">
  <option disabled="" selected="">Choose</option>
</span>

这给了我：

选择2

SELECT1 - 问题

我不明白为什么现在 SELECT2 被置于其余部分之上

Answer 1

由于input-group 类的属性，所有元素都进入堆栈。您可以删除它以使其按照您的设计要求工作。

<span id="spanid">
 <div class="form-group col-md-3">
  <select class="form-control">
   <option disabled="" selected="">Choose</option> 
   <option>Option 1</option>
   <option>Option 2</option>
  </select>
 </div>
 <div class="well well-sm col-md-7">
  <h5 id="eQuestion">A question</h5>
 </div>
 <div class="form-group  col-md-10">
  <select class="form-control">
   <option disabled="" selected="">Choose the correct answer</option>
   <option>Option 1</option>
   <option>Option 2</option>
  </select>
 </div>
</span>

由于您使用的是col-md-3 柱状网格，因此只能在中级设备或以上设备上使用

根据您对代码的修改。这对我来说效果很好。

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<span id="vqaspan" class="row">
 <div class="form-group col-md-3">
  <select class="form-control">
   <option disabled="" selected="">Choose1</option>
  </select>
 </div>
 <div class="well well-sm col-md-7">
  <h5 id="eQuestion">Question</h5>
 </div>
 <div class="form-group col-md-10">
 <select class="form-control">
  <option disabled="" selected="">Choose2</option>
  </select>
  </div>
</span>

它给出了意外的行为，因为您可能错过了最后关闭 select 和 div。

Answer 2

我知道您在这里专门询问引导程序，但是如果我可能会沉迷于“您应该改用它”，那么仅使用纯 HTML 功能（flexbox）怎么样？这种类型的场景就是它的用途（实际上，bootstrap 4 现在是用 flexbox 构建的），并且正如您所看到的，它实际上比 bootstrap 非常难以正确处理并且接近不可读的“col-md-x”css 方法要简单得多。

在此示例中，为了便于阅读，我们将flex-grow:2 放在第一行的select 上，将flex-grow:1 放在h5 上，这或多或少达到了2/3 和1/您似乎想要的 3 个比率：

.row {
  display: flex;
  align-items: center;
}

#row1 select {
  flex-grow: 2;
}

#row1 h5 {
  flex-grow: 1;
}

#row2 select {
  flex-grow: 1;
}

<div class="row" id="row1">
  <select>
    <option>Choose</option>
    <option>Option 1</option>
    <option>Option 2</option>
  </select>
  <h5>A question</h5>
</div>
<div class="row" id="row2">
  <select>
    <option>Choose the correct answer</option>
    <option>Option 1</option>
    <option>Option 2</option>
  </select>
</div>