16

我需要使用 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-->

结果我有这个：

在此处输入图像描述

向下移动 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-->

在此处输入图像描述

任何想法如何在没有肮脏黑客的情况下做到这一点（例如，我可以使用 JavaScript 来修复 Widget2 的位置）？

或者（好吧，好吧）和他们一起？

4

2 回答 2

6

从我读过的所有内容来看，如果没有 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-->
于 2012-11-26T15:26:53.693 回答
1

我了解您希望 Widget2 与内容 div 共享底部边框。尝试添加

style="position: relative; bottom: 0px"

到您的 Widget2 标签。也试试：

style="position: absolute; bottom: 0px"

如果您想将小部件捕捉到屏幕底部。

我对 CSS 有点生疏，也许正确的样式是“margin-bottom: 0px”而不是“bottom: 0px”，试一试。此外，pull-right 类似乎为元素添加了“float=right”样式，我不确定它在“position：relative”和“position：absolute”中的表现如何，我会删除它。

于 2014-03-05T23:13:18.817 回答