引导：使用.pull-right，而不必硬编码负边距顶部 [英] Bootstrap: Use .pull-right without having to hardcode a negative margin-top

问题描述

这是我的代码（请参阅此处）：

This is my code (please see fiddle here):

<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 但是感觉不对。

I want #login-box to have .pull-right and be at the same height as the p. I can use margin-top: -100px but that feels wrong.

如何可以＃login-box 在与 p 相同的高度而不用硬编码负数 margin-top ？

How can I have #login-box at the same height as the p without hardcoding a negative margin-top?

推荐答案

浮动元素将会在布局中正常显示。要解决这个问题，您有两个选择：

Float elements will be rendered at the line they are normally in the layout. To fix this, you have two choices:

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

Move the header and the p after the login box:

<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

Or enclose the left block in a pull-left div, and add a clearfix at the bottom

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

这篇关于引导：使用.pull-right，而不必硬编码负边距顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！