Question

尝试创建一个自举形式，其中有两个水平和输入字段。多选。 1区和1区区域2和选择应该在输入文本字段旁边。你可以帮忙，对我来说，1区和1区2位于输入字段下方。

<div class="container">
<h2>Bootstrap Form</h2>
<form role="form" class="form-horizontal">
    <div class="form-group">
        <div class="col-sm-5"><input type="text" class="form-control" id="inputId" placeholder="Enter Name"></div>
    </div>
    <div class="form-group">
        <div class="col-sm-5"><input type="text" class="form-control" id="inputAD" placeholder="IP address"></div>
    </div>
    <div class="form-group">
      <div class="col-sm-5">
        <label class="col-sm-12" for="selBuy">Region 1</label>
        <div class="col-sm-6">
          <select class="form-control" id="selBuy" multiple="multiple" size="6">
            <option>California </option>
            <option>Atlanta</option>

          </select>
        </div>
      </div>
      <div class="col-sm-5">
        <label class="col-sm-12" for="selCSP">Region 2</label>
        <div class="col-sm-6">
          <select class="form-control" id="selCSP" multiple="multiple" size="6">
            <option>Google </option>
            <option>IBM</option>
          </select>
        </div>
      </div>
  </div>

</form>
<hr>
</div>

Answer 1

我为此设置了一个小提琴： http://jsfiddle.net/1wpjxp1e/

基本上我已将输入字段包装在一个额外的包装div

中

<div class="col-sm-12">...</div>

以及选择框：

<div class="col-sm-12">...</div>

当我这样做时，你需要确保保留预期的大小，所以我改变了

<div class="col-sm-5">

要：

<div class="col-sm-12">

因为它需要全尺寸。现在，您可以在小提琴中看到两个区域都在输入字段旁边。

混合Bootstrap形式

1 个答案: