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-horizontal 或 form-inline 类引导程序

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

Answer 2

请申请此代码：

label {
    width: auto;
    display: inline-block;
}
#example {
    width: auto;
    display: inline-block;
    margin-left: 15px;
}
<div class="form-group">
  <label for="example">LABEL<span style="color:red">*</span></label>
  <input id="example" class="form-control" type="text"/>
</div>

我希望它对你有所帮助。

由于

引导标签和输入大小：sm大小下两行，sm大小一行，一行固定

2 个答案: