BootStrap、右に固定された右の列を整列する方法

Question

私は、コンテナの上部に固定する必要がある列の右側にナビゲーションバーを持っています。問題は、navが固定されていて、左の列の右に正しく整列できない場合です... col-md-offset-xxを使用して整列できますが、ブラウザの幅が変更された場合、navはもう整列していない。ブートストラップで

https://jsfiddle.net/DTcHh/18665/

<div style="width:1170px;margin:10px auto;position:relative;padding:10px;border:1px solid black;"> 
    <div class="row"> 
    <div class="col-md-9" style="border:1px solid green;"> 
     <h1>left column</h1> 
     <h1>left column</h1> 
     <h1>left column</h1> 
     <h1>left column</h1> 
     <h1>left column</h1> 
     <h1>left column</h1> 
     <h1>left column</h1> 
     <h1>left column</h1> 
     <h1>left column</h1> 
     <h1>left column</h1> 
     <h1>left column</h1> 
     <h1>left column</h1> 
     <h1>left column</h1> 
    </div> 
    <div class="col-md-3 col-md-offset-6" style="border:1px solid red;position:fixed;top:0px;"> 
     <h1>Right column</h1> 
    </div> 
    </div> 
</div> 

Answer 1

あなたは非スタッキング（XS）は、このような列を使用する必要があります。..

<div class="row"> 
    <!-- main --> 
    <div class="column col-xs-9"> 
    .. 
    </div>  
    <!-- sidebar --> 
    <div class="column col-xs-3" id="sidebar"> 
     Fixed right sidebar 
    </div> 
</div> 

この方法では、小さなデバイス上で列が縦に積み重ねられず（新しい行に折り返される）、右側のサイドバーは固定されたままになります。

http://www.bootply.com/DZ1Csh3dRH

Answer 2

、グリッドシステムは、列に基づいており、あなたは右の列に.col-md-offset-6クラスを追加することによって、グリッドシステムのロジックに違反しています。左と右の列の比率を同じにしたい場合。

<div style="width:1170px;margin:10px auto;position:relative;padding:10px;border:1px solid black;"> 
    <div class="row"> 
    <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9" style="border:1px solid green;"> 
     <h1>left column</h1> 
     <h1>left column</h1> 
     <h1>left column</h1> 
     <h1>left column</h1> 
     <h1>left column</h1> 
     <h1>left column</h1> 
     <h1>left column</h1> 
     <h1>left column</h1> 
     <h1>left column</h1> 
     <h1>left column</h1> 
     <h1>left column</h1> 
     <h1>left column</h1> 
     <h1>left column</h1> 
    </div> 

    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" style="border:1px solid red;position:fixed;top:0px;"> 
     <h1>Right column</h1> 
    </div> 
    </div> 
</div> 

か、左と右の列の間のマージンを追加したい場合は、あなたのコードは次のようにする必要があります：あなたのコードは次のようにする必要があります。ここ

<div style="width:1170px;margin:10px auto;position:relative;padding:10px;border:1px solid black;"> 
    <div class="row"> 
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" style="border:1px solid green;"> 
     <h1>left column</h1> 
     <h1>left column</h1> 
     <h1>left column</h1> 
     <h1>left column</h1> 
     <h1>left column</h1> 
     <h1>left column</h1> 
     <h1>left column</h1> 
     <h1>left column</h1> 
     <h1>left column</h1> 
     <h1>left column</h1> 
     <h1>left column</h1> 
     <h1>left column</h1> 
     <h1>left column</h1> 
    </div> 
    <div class="col-xs-3 col-xs-offset-6 col-sm-3 col-sm-offset-6 col-md-3 col-md-offset-6 col-lg-3 col-lg-offset-6" style="border:1px solid red;position:fixed;top:0px;"> 
     <h1>Right column</h1> 
    </div> 
    </div> 
</div> 

あなたがグリッドを理解し、相殺する例です。ロジック：

<div class="row"> 
    <div class="col-md-4">.col-md-4</div> 
    <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> 
</div> 

ご覧のとおり、合計は12である（コ1-md-4 + col-md-4 + col-md-offset-4）のオフセットを有する。

Answer 3

pull-rightのブートストラップクラスを使用することができます（右側に揃えたい場合のみ）。ページの一番上にある場合は、各浮動小数点数に 'float：left & right'を追加するか、colオフセット（9 + 3の整列）を削除する必要があります。

あなたはここで、これを見ることができます：ここhttps://jsfiddle.net/DTcHh/18666/

詳細情報：Left align and right align within div in Bootstrap、ここで：http://getbootstrap.com/css/