我需要使用Boostrap做这样的事情.页面上有“流体”内容,其中包含两个小部件 – 首先在右上角,第二个位于左下角.
Widget1很容易 – 我只需要class =“pull-right”.但是第二个如何处理页面的底部,保持“内容”浮动？
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-->
结果是这样的：
移动小部件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-->
任何想法如何做没有脏黑客(例如我可以使用JavaScript来修复Widget2的位置)？
或者(好的,好的)与他们？
解决方法
从我所有的阅读,你不能做完全你想要的没有javascript.
如果你在文字前左移
如果你在文字前左移
<div style="float:left;">widget</div> here is some CONTENT,etc.
您的内容按预期包装.但您的小部件位于左上方.如果你把内容放在浮动之后
here is some CONTENT,etc. <div style="float:left;">widget</div>
那么如果内容的最后一行可以适合窗口小部件的右侧,则您的内容将最后一行包装到窗口小部件的右侧,否则不会包装.为了使边框和背景实际上包含上一个示例中的浮动区域,大多数人添加：
here is some CONTENT,etc. <div style="float:left;">widget</div><div style="clear:both;"></div>
在您的问题中,您正在使用引导程序,只需添加row-fluid :: after {content：“”}来解决边框/后台问题.
将您的内容向上移动将给您一条线包装：
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-->
