html - bootstrap 标签和输入大小 : two lines under sm size, 一行超过 sm 大小，一个固定宽度

Question

是否可以在 bootstrap 中实现？

我实现了两行标签和输入。

<div class="form-group">
  <label for="example">LABEL<span style="color:red">*</span></label>
  <input id="example" class="form-control" type="text"/>
</div>

但是当显示宽度超过 sm 大小时，我想将它们放在一行中。因此，我按如下方式编辑我的代码。

<div class="form-group">
  <div class="col-md-2">
    <label for="example">LABEL<span style="color:red">*</span></label>
  </div>
  <div class="col-md-10">
    <input id="example" class="form-control" type="text"/>
  </div>
</div>

除了一些边距问题外，它看起来不错。但我也希望标签宽度大小固定，以便只有输入宽度大小在右侧灵活。

这可能吗？提前致谢。

Answer 1

尝试使用 form-horizo​​ntal 或 form-inline 类的 Bootstrap

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
</form>