Bootstrap：使用 .pull-right 无需硬编码负边距顶部答案

【问题标题】：Bootstrap: Use .pull-right without having to hardcode a negative margin-topBootstrap：使用 .pull-right 无需硬编码负边距顶部
【发布时间】：2013-01-20 03:09:48
【问题描述】：

这是我的代码（请看小提琴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，但感觉不对。

如何在不硬编码否定的margin-top 的情况下让#login-box 与p 处于相同高度？

【问题讨论】：

只需删除您拥有的两个class='clearfix'，因为它们在那里不做任何事情，并将class='hero-unit'改为class='hero-unit clearfix'。

标签： html css twitter-bootstrap

【解决方案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>

或者把左边的block放在一个pull-left 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>

【讨论】：

【解决方案2】：

只需将#login-box 放在<h2>Welcome</h2> 之前就可以了。

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

这里是 jsfiddle http://jsfiddle.net/SyjjW/4/

【讨论】：

【解决方案3】：

将 h2 保持在顶部，然后在 p 上向左拉，在登录框上向右拉

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

    <h2>Welcome</h2>

    <div class="pull-left">
      <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 更改为 pull-left 来检查）。

【讨论】：