在Bootstrap布局中浮动div

Question

我需要使用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位置)？

或者(好吧,好吧)和他们一起？

Answer 1

从我所读过的所有内容中,如果没有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>

在你的问题中,你正在使用bootstrap,它只是添加了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-->