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

我认为这就是你想要的，请看小提琴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>

标签和输入包装在不同的宽度

1 个答案: