Question

我不知道如何在这里获得我想要的效果。我有两个输入框在同一行，我想在它们下面有标签并对齐以匹配相应的输入框。

<div class="container">
   <form class="form-inline" role="form">
      <div class="form-group">
          <label for="decimal_input">Label 1</label>
          <input type="text" value="1" width="10" id="decimal_input" class="form-control" />
          = <label for="input2">Label 2</label> 
          <input type="text" value="I" width="30" id="input2" class="form-control" />
      </div>
</div>
</form>

在这里查看jsfiddle了解更多信息：

http://jsfiddle.net/justinhj/bTVKZ/2/

Answer 1

http://jsfiddle.net/isherwood/bTVKZ/6

<div class="container">
    <form class="form-inline" role="form">
        <div class="form-group">
            <div class="pull-left">
                <input type="text" value="1" width="10" id="decimal_input" class="form-control" />
                <br />
                <label for="decimal_input">Label 1</label>
            </div>
            <div>
                <input type="text" value="I" width="30" id="input2" class="form-control" />
                <br />
                <label for="input2">Label 2</label>
            </div>
        </div>
    </form>
</div>

Answer 2

你可以试试这个

额外的CSS：

label {
   display:block;
}

.form-group {
    display:inline-block;
}

修改后的HTML：

<div class="container">
    <form class="form-inline" role="form">
        <div class="form-group">
            <input type="text" value="1" width="10" id="decimal_input" class="form-control" />
            <label for="decimal_input">Label 1</label>
        </div>
        <div class="form-group">
            <input type="text" value="I" width="30" id="input2" class="form-control" />
            <label for="input2">Label 2</label>
        </div>
    </form>
</div>

DEMO.

Answer 3

您的新HTML：

<div class="container">
    <form class="form-inline" role="form">
        <div class="form-group">
            <span class="inner-container">
                <label for="decimal_input">Label 1</label>
                <input type="text" value="1" width="10" id="decimal_input" class="form-control" />
            </span>
            =
            <span class="inner-container">
                <label for="input2">Label 2</label>
                <input type="text" value="I" width="30" id="input2" class="form-control" />
            </span>
        </div>
</div>
</form>
</diV>

你的新CSS（当然我会在标签上添加一个类）：

.container {
    margin-top: 10px;
}

.inner-container {
    position: relative;
}

label {
    top: 25px;
    left: 5px;
    position: absolute;
}

这是fiddle

使用Bootstrap对齐输入框下的标签

3 个答案: