html - Bootstrap-如何使用带有前置文本的水平表单布局？

Question

我一直在尝试使用如下的水平表单布局:

Enter Email: [field]            Enter password: [prepend+field]

我已经尝试了一个小时，但找不到任何解决方案。请告诉我该怎么做。我试过:

<form class="form-horizontal">
    <!--<span class="offset2">Sign Into the Email</span>-->
    <div class="control-group">
        <div class="controls"><span>Welcome to My Email</span></div>
    </div>

    <div class="control-group input-append">
        <label for="emailid"  class="control-label">Email id</label>
        <div class="controls">
            <input type="text" />
            <span class="add-on">@</span>
        </div>
    </div>

    <div class="control-group input-append">
        <label for="passwd" class="control-label">Password</label>
        <div class="controls">
            <input type="password" />
            <span class="add-on">***</span>
        </div>
    </div>

    <div class="control-group">
        <div class="controls"  >
            <label class="checkbox">
                <input type="checkbox" />Remember Me
            </label>
            <button class="btn">Sign In</button>
        </div>
    </div>
</form>

Answer 1

您正在寻找 form-inline class .

您可以使用此 css 在表单组之间添加间距:

.form-inline .form-group {
    margin-right: 10px;
}