Html Bootstrap：使用 .pull-right 无需硬编码负边距顶部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14416563/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap: Use .pull-right without having to hardcode a negative margin-top
提问by Randomblue
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>
I want #login-boxto have .pull-rightand be at the same height as the p. I can use margin-top: -100pxbut that feels wrong.
我想#login-box拥有.pull-right并与p. 我可以使用，margin-top: -100px但感觉不对。
How can I have #login-boxat the same height as the pwithout hardcoding a negative margin-top?
我怎样才能#login-box在p没有硬编码的情况下与负数处于相同的高度margin-top？
回答by Dutow
Float elements will be rendered at the line they are normally in the layout. To fix this, you have two choices:
浮动元素将在它们通常在布局中的行处呈现。要解决此问题，您有两种选择：
Move the header and the p after the login box:
在登录框后移动标题和 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>
Or enclose the left block in a pull-left div, and add a clearfix at the bottom
或者将左块包含在一个 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>
回答by pktangyue
just put #login-boxbefore <h2>Welcome</h2>will be ok.
只要放在#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>
here is jsfiddle http://jsfiddle.net/SyjjW/4/
这是 jsfiddle http://jsfiddle.net/SyjjW/4/
回答by thebjorn
Keep the h2 at the top, then pull-left on the p and pull-right on the login-box
将 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>
the default vertical-align on floated boxes is baseline, so the "Please log in" exactly lines up with the "Username" (check by changing the pull-right to pull-left).
浮动框上的默认垂直对齐是基线，因此“请登录”与“用户名”完全对齐（通过将右拉改为左拉来检查）。
