Question

我在表单标签中使用带有表单水平的Bootstrap 3。我正在使用form-group，如下面的示例HTML所示。 span不与输入控件内联，因为它是使用form-horizontal预期的。

<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

您需要做的只是将跨度更改为标签，并将其放在保存输入的div上方，如下所示：

＆＃13;

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

＆＃13;

但是如果你想要它作为一个跨度，这里是我不推荐的代码，因为你不能适用<span>适用于<label>的内容，就好像点击标签，它将选择他的输入。

＆＃13;

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

＆＃13;

如果您有任何问题，请告诉我或我是否遗漏了您想要的东西。

Answer 2

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

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

我的意思是单独的DIV，可能因为没有使用＆＃34;标签＆＃34;您的两个单独的DIV不是内联的： enter image description here

似乎Bootstrap正在使用实际标签，所以您可能想要朝这个方向冒险？（见下文） enter image description here

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

2 个答案: