html - span 与使用 bootstrap 3 的输入不内联

Question

我在表单标签中使用带有 form-horizo​​ntal 的 Bootstrap 3。我正在使用表单组，如下面的 HTML 示例所示。 span 与输入控件不内联，正如使用 form-horizo​​ntal 所期望的那样。

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

为了更好地理解，这是 fiddle为了它

引用解决方案: 请引用 span 中的 control-label 类，使其像 fiddle working 一样工作。

Answer 1

您需要做的就是将 span 更改为 label 并将其放在保存输入的 div 上方，如下代码所示:

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

但是如果您希望将其作为跨度，这里是我不推荐的代码，因为您不能应用于 <span>您可以申请什么 <label>就像您单击标签一样，它会选择他的输入。

<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">
    <span for="number" class="col-sm-2 control-label">Number</span>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="number" placeholder="Enter your Number...">
    </div>
  </div>
  <div class="form-group">
    <span for="name" class="col-sm-2 control-label">Name</span>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="name" placeholder="Enter your Name...">
    </div>
  </div>
</form>

如果您有任何问题，请告诉我，或者如果我错过了您想要的东西。