Question

我想将屏幕划分为3个等于列，并输出2个行中的6个输入字段，因此它就像6个单元格：2行* 3列，每个单元格的中心带有标签+输入。当我到达第4位时，我遇到了问题，它出现在第5位而不是第4位：

<form class="form-horizontal" role="form">
<div class="form-group col-sm-4">
  <label for="field1" class="col-sm-4 control-label">From</label>
  <div class="col-sm-8">
    <input type="text" class="form-control" id="field1" value="" />
  </div>
</div>
<div class="form-group col-sm-4">
  <div class="col-sm-offset-2">
    <div class="checkbox">
      <label>
        <input type="checkbox">checkbox1
      </label>
    </div>
  </div>
</div>
<div class="form-group col-sm-4">
  <div class="col-sm-offset-2">
    <div class="checkbox">
      <label>
        <input type="checkbox">checkbox2
      </label>
    </div>
  </div>
</div>
<div class="form-group col-sm-4">
  <label for="field4" class="col-sm-4 control-label">To</label>
  <div class="col-sm-8">
    <input type="text" class="form-control" id="field4" value="" />
  </div>
</div>
<div class="form-group col-sm-4">
  <label for="field5" class="col-sm-4 control-label">To</label>
  <div class="col-sm-8">
    <input type="text" class="form-control" id="field5" value="" />
  </div>
</div>
    <div class="form-group col-sm-4">
  <label for="field6" class="col-sm-4 control-label">To</label>
  <div class="col-sm-8">
    <input type="text" class="form-control" id="field6" value="" />
  </div>
</div>

http://plnkr.co/edit/My98o6loOHoKM9vLqn0H?p=preview

我做错了什么？

Answer 1

添加 .form-horizontal .form-group:after{ display:inline-block; } 进入你的css文件。这将解决您的问题。但我建议使用不同的类名来做，form-horizontal＆amp; form-group是bootstrap的内置类：）

带有复选框和文本输入的多列表单显示错误

1 个答案: