span未与使用bootstrap 3的输入内联

Question

我正在使用带有form-horizonal的Bootstrap 3。我正在使用form-group，如下例HTML所示。span未与输入控件内联，这是使用form-horizonal所期望的。

<form name="productForm" class="form-horizontal">
<div class="col-lg-6">
    <div class="form-group">

            <span class="col-lg-4 col-md-4 col-sm-4 col-xs-4" style="text-align:right;">Number</span>

        <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
            <input type="text" class="form-control  control-look-input" />
            <div class="control-look"></div>
        </div>
    </div>
    <div class="form-group">

            <span class="col-lg-4 col-md-4 col-sm-4 col-xs-4" style="text-align:right;">Name</span>

        <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
            <input type="text" class="form-control control-look-input" />
            <div class="control-look"></div>
        </div>
    </div>
</div>
<!-- More tags -->

null

为了更好地理解这是它的小提琴

参考解决方案：在span中引用control-label类，使其像fiddle一样工作

Answer 1

您所需要做的只是将span更改为label，并将其置于保存输入的div上方，如下代码所示：

null

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<form name="productForm" class="form-horizontal">
  <div class="form-group">
    <label for="number" class="col-sm-2 control-label">Number</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="number" placeholder="Enter your Number...">
    </div>
  </div>
  <div class="form-group">
    <label for="name" class="col-sm-2 control-label">Name</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="name" placeholder="Enter your Name...">
    </div>
  </div>
</form>