html - 不同宽度的标签和输入换行

Question

我在一行中有三列，前两列带有文本(标题)，最后一列带有标签/选择输入，一列堆叠在另一列之上。我想要做的是让列以不同的宽度换行 - 特别是 md 的标签/选择，以及 sm 的纯文本。看起来很简单，但我不能同时让标签和选择换行。选择在 md 处按预期中断，但标签仅在 sm 宽度处换行，连同标题。

<div class="row">
  <div class="col-sm-4">
    <h2>Large title</h2>
  </div>
  <div class="col-sm-5">
    <h3>Smaller, longer title</h3>
  </div>
  <div class="col-md-3">
    <div class="form-group">
      <label for="sel">Select an option</label>
      <select id="sel" name="sel" class="form-control">
        <option>First option with long text</option>
        <option>Second option with long text</option>
      </select>
    </div>
  </div>
</div>

https://jsfiddle.net/uft4vaoc/

我是不是在做什么蠢事？

Answer 1

我认为这就是您想要的，请参阅 fiddle https://jsfiddle.net/uft4vaoc/1/

只需添加 col-xs-12到你想像这样包装在一起的 div:

<div class="col-md-3 col-xs-12">

为了给它一个更好的流程，你可以像这个例子一样添加一些额外的类 https://jsfiddle.net/uft4vaoc/3/

<div class="col-md-3 col-xs-12">
  <div class="row">
    <div class="form-group col-md-12 col-sm-6  col-xs-8">
      <label for="sel">Select an option</label>
      <select id="sel" name="sel" class="form-control">
        <option>First option with long text</option>
        <option>Second option with long text</option>
      </select>
    </div>
  </div>
</div>