16

Boostrapを使用してこのようなことをする必要があります。内部に 2 つのウィジェット (最初は右上、2 番目は左下) を含むページ上の「流動的な」コンテンツ。

ここに画像の説明を入力

Widget1 は簡単です。必要なのは class="pull-right" だけです。しかし、「コンテンツ」を浮かび上がらせたままページの一番下に表示するには、2 番目のものをどうすればよいでしょうか。

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 の位置を修正できます)?

または（わかりました、わかりました）彼らと一緒に？

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: ""}では、ボーダー/バックグラウンドの問題を解決するために追加するだけのブートストラップを使用しています。

コンテンツを上に移動すると、1行の折り返しが表示されます：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 に答える