html - ブートストラップ固定サイズ列

Question

ブートストラップで固定幅の右側の列を実行する必要がありますが、左側の列は応答します。

ブートストラップ 2.3.2 を使用します

_{(出典: toile-libre.org )}

右の列は、すべての画面サイズでサイズ変更されません。

Answer 1

以下の私の基本的な解決策（実際の動作はこちらをご覧ください）。色付きのブロックを示すために CSS をパディングしましたが、実際に行う必要があるのは次のとおりです。

固定要素

• に設定しますfloat:right
• それに固定幅を適用します

流体列要素

• padding/margin-right固定要素の幅に等しく適用
• を適用box-sizing:border-boxして、要素に対して 100% の幅.row-fluidが維持されるようにしますが、追加されたマージン/パディングによってそれ以上押し出されることはありません。以下のマークアップは、最低限必要なものを示しています。

CSS

#fixed-width { 
    width:100px;
    float:right;
}
#fluid.row-fluid {
    margin-right:100px;
    -webkit-box-sizing:border-box;
       -moz-box-sizing:border-box;
            box-sizing:border-box;    
}

HTML

<div class="clearfix">
    <div id="fixed-width">Content...</div>
    <div id="fluid" class="row-fluid">
        <div class="span4">a</div>
        <div class="span4">b</div>
        <div class="span4">c</div>
    </div>
</div>