标签和输入包装在不同的宽度-Java 学习之路

我在一行中有三列，前两行有文本（ Headers ），最后一列带有标签/选择输入，一个堆叠在另一个上面 . 我想要做的是使列以不同的宽度包裹 - 特别是 md 处的标签/选择，以及 sm 处的纯文本 . 看起来很简单，但我不能同时制作标签和选择包装 . 选择按照预期在 md 处中断，但标签仅与 sm 宽度一起包装，以及 Headers .

<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/

我在这做傻事吗？

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>

回复于 2024-05-06T23:56:05+08:00

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

1 回答

相关问题