Bootstrap 3 - 是否可以有混合输入字段(默认+水平)

时间:2016-12-16 09:31:16

标签: twitter-bootstrap twitter-bootstrap-3

是否可以在同一表单中使用不同的表单输入字段:

enter image description here

因此某些部分是默认的(标签位于输入字段的顶部)而其他部分是水平的(输入字段左侧的标签)

1 个答案:

答案 0 :(得分:1)

确定。你可以做任何你想做的事:)看看这个:

<form>
  <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
    <div class="form-group">
      <label for="item1">Item 1:</label>
      <input class="form-control" id="item1" type="item1" placeholder="Enter text">
    </div>
    <div class="form-group">
      <label for="item2">Item 2:</label>
      <input class="form-control" id="item2" type="item2" placeholder="Enter text">
    </div>
    <div style="padding-left: 50px; padding-right: 50px;">
      <div class="form-group" style="display: flex;">
        <label style="width: 80px; padding-top: 7px;" for="gross">Gross:</label>
        <input class="form-control" id="item1" type="gross" placeholder="Enter text">
      </div>
      <div class="form-group" style="display: flex;">
        <label style="width: 80px; padding-top: 7px;" for="netto">Netto:</label>
        <input class="form-control" id="item2" type="netto" placeholder="Enter text">
      </div>
      <button class="btn btn-primary" style="margin-left: 73px; margin-top: 20px;" type="submit">Submit</button>
    </div>
  </div>
</form>

http://www.bootply.com/mPFpU6jyYe