ブートストラップレイアウトのフローティングディビジョン

Question

Boostrapを使ってこのようなことをする必要があります。ページ内の2つのウィジェットを含むページ上の "Fluid"コンテンツ。最初は右上、左下は左下。

WIDGET1は簡単です - 私はちょうど必要なクラス= "プル権利を"。しかし、「コンテンツ」を浮かべてページの一番下に移動させるには、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の位置を修正できます）？

（ok、ok））

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> 

あなたの質問では、ボーダー/バックグラウンドの問題を解決するだけで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--> 

Answer 2

私はあなたがWIDGET2は、コンテンツのdivと下の枠線を共有したいことを理解しています。あなたのWidget2タグに

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

を追加してみてください。もう一度試してみてください：

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

ウィジェットを画面の下部にスナップする場合は、試してみてください。

CSSで少し錆びていますが、正しいスタイルは「margin-bottom：0px」でなく「bottom：0px」です。試してみてください。また、pull-rightクラスは要素に "float = right"スタイルを追加するように見えますが、これは "position：relative"と "position：absolute"でどのように動作するのかよく分かりません。