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>

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

Answer 2

由于您的信息有限，很难说出您的其他样式是什么。 Here is a quick example 没有实现正确的样式会对您的表单造成影响，因为您的 <span> 和 <input> 实际上位于两个不同的 div 中，可能未设置为内联显示。

.form-horizontal div {
    display: inline-block;
}

这就是我所说的单独 DIV 的意思，可能由于不使用“标签”，您的两个单独 DIV 不是内联的：

Bootstrap 似乎正在使用实际标签，所以您可能想朝那个方向冒险？ （示例见下）