Bootstrap:使用.pull-right而不必硬编码负边距顶部

Question

这是我的代码(请看这里的小提琴):

<div class='container'>
    <div class='hero-unit'>
        <h2>Welcome</h2>

        <p>Please log in</p>
        <div id='login-box' class='pull-right control-group'>
            <div class='clearfix'>
                <input type='text' placeholder='Username' />
            </div>
            <div class='clearfix'>
                <input type='password' placeholder='Password' />
            </div>
            <button type='button' class='btn btn-primary'>Log in</button>
        </div>
    </div>
</div>

我希望#login-box拥有.pull-right并与之相同的高度p.我可以使用,margin-top: -100px但感觉不对.

如何#login-box在p没有硬编码的情况下保持同样的高度margin-top？

Answer 1

浮动元素将呈现在它们通常在布局中的行.要解决此问题,您有两种选择:

在登录框后移动标题和p:

<div class='container'>
    <div class='hero-unit'>

        <div id='login-box' class='pull-right control-group'>
            <div class='clearfix'>
                <input type='text' placeholder='Username' />
            </div>
            <div class='clearfix'>
                <input type='password' placeholder='Password' />
            </div>
            <button type='button' class='btn btn-primary'>Log in</button>
        </div>

        <h2>Welcome</h2>

        <p>Please log in</p>

    </div>
</div>

或者将左侧块放在左拉div中,并在底部添加一个clearfix

<div class='container'>
    <div class='hero-unit'>

        <div class="pull-left">

          <h2>Welcome</h2>

          <p>Please log in</p>

        </div>

        <div id='login-box' class='pull-right control-group'>
            <div class='clearfix'>
                <input type='text' placeholder='Username' />
            </div>
            <div class='clearfix'>
                <input type='password' placeholder='Password' />
            </div>
            <button type='button' class='btn btn-primary'>Log in</button>
        </div>

        <div class="clearfix"></div>

    </div>
</div>