Html Bootstrap 布局中的浮动 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13563893/
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
Floating divs in Bootstrap layout
提问by kostik
I need to do something like this using Boostrap. "Fluid" content on the page with two widgets inside it - first at top-right and second at left-bottom.
我需要使用 Boostrap 做这样的事情。页面上的“流畅”内容，其中包含两个小部件 - 第一个在右上角，第二个在左下角。
Widget1 is easy - I just needed class="pull-right". But what to do with the second one to get it to the bottom of the page keeping "Content" floating around?
Widget1 很简单——我只需要 class="pull-right"。但是如何处理第二个以使其到达页面底部并保持“内容”浮动？
style="bottom:0;"does not work:
Having this code
style="bottom:0;"不起作用：有这个代码
<div class="container-fluid">
<div class="row-fluid">
<div class="offset1 span8 pull-right">
... Widget 1...
</div>
<div class="offset1 span8 pull-left" style="bottom:0;">
... Widget 2...
</div>
.... a lot of content ....
</div>
</div><!--/.fluid-container-->
I have this as a result:
我有这个结果：
Moving Widget 2 down also does not help:
向下移动 Widget 2 也无济于事：
<div class="container-fluid">
<div class="row-fluid">
<div class="offset1 span8 pull-right">
... Widget 1...
</div>
.... a lot of content ....
<div class="span8 pull-left" style="bottom:0;margin-left: 0;">
... Widget 2...
</div>
</div>
</div><!--/.fluid-container-->
Any ideas how to do that without dirty hacks (for example I could use JavaScript to fix Widget2 position)?
任何想法如何在没有肮脏黑客的情况下做到这一点（例如，我可以使用 JavaScript 来修复 Widget2 的位置）？
Or (ok, ok) with them?
或者（好吧，好吧）和他们在一起？
回答by Daniel Moses
From all I have read you cannot do exactly what you want without javascript. If you float left before text
从我所读到的所有内容来看，如果没有 javascript，您将无法完全按照自己的意愿行事。如果你在文本之前向左浮动
<div style="float:left;">widget</div> here is some CONTENT, etc.
Your content wraps as expected. But your widget is in the top left. If you instead put the float after the content
您的内容按预期换行。但是您的小部件位于左上角。如果您改为将浮动放在内容之后
here is some CONTENT, etc. <div style="float:left;">widget</div>
Then your content will wrap the last line to the right of the widget if the last line of content can fit to the right of the widget, otherwise no wrapping is done. To make borders and backgrounds actually include the floated area in the previous example, most people add:
然后，如果最后一行内容可以适合小部件的右侧，则您的内容会将最后一行包装到小部件的右侧，否则不进行换行。为了使边框和背景实际上包括上一个示例中的浮动区域，大多数人添加：
here is some CONTENT, etc. <div style="float:left;">widget</div><div style="clear:both;"></div>
In your question you are using bootstrap which just adds row-fluid::after { content: ""}which resolves the border/background issue.
在您的问题中，您使用的引导程序只是添加了row-fluid::after { content: ""}解决边界/背景问题的方法。
Moving your content up will give you the one line wrap : http://jsfiddle.net/jJNPY/34/
向上移动您的内容将为您提供一行换行：http: //jsfiddle.net/jJNPY/34/
<div class="container-fluid">
<div class="row-fluid">
<div class="offset1 span8 pull-right">
... Widget 1...
</div>
.... a lot of content ....
<div class="span8" style="margin-left: 0;">
... Widget 2...
</div>
</div>
</div><!--/.fluid-container-->
回答by rodix
I understand that you want the Widget2 sharing the bottom border with the contents div. Try adding
我知道您希望 Widget2 与内容 div 共享底部边框。尝试添加
style="position: relative; bottom: 0px"
to your Widget2 tag. Also try:
到您的 Widget2 标签。还可以尝试：
style="position: absolute; bottom: 0px"
if you want to snap your widget to the bottom of the screen.
如果您想将小部件捕捉到屏幕底部。
I am a little rusty with CSS, perhaps the correct style is "margin-bottom: 0px" instead "bottom: 0px", give it a try. Also the pull-right class seems to add a "float=right" style to the element, and I am not sure how this behaves with "position: relative" and "position: absolute", I would remove it.
我对 CSS 有点生疏，也许正确的样式是“margin-bottom: 0px”而不是“bottom: 0px”，试试看。此外，pull-right 类似乎为元素添加了“float=right”样式，我不确定这与“位置：相对”和“位置：绝对”的行为如何，我会删除它。
