web-dev-qa-db-ja.com

コンテナ流体で固定幅の列を作成する方法は？

左側に固定幅の横列を、次に右側に通常のBootstrap container-fluid。]を配置しようとしています。

サイドバーがBootstrap構造内にない場合でも、問題ありません。col-xx-xxクラスを使用する必要はありません。

主な問題が何であれ、流体容器をサイドバーの横にとどめることができないということです。

ポイントは、サイドバーを何も表示しない場合、流体コンテナはページの全幅を使用する必要があることです。

csstwitter-bootstrapcss3flexbox
18
somtam

fixed-fluidレイアウトは Bootstrap 3 ）で可能ですが、今ではBootstrap 4is flexboxこのレイアウトははるかに簡単です。flexboxを有効にし、いくつかの簡単な調整を行って固定側の幅を設定するだけです。列flex: 0 0 300px;、 その後 flex: 1;メイン列で残りの幅を埋める...

Bootstrap 4 Alpha 2http://codeply.com/go/eAYKvDkiGw

以下は、最新のBootstrap 4のより簡単な更新で、デフォルトではflexboxです：

Bootstrap 4 Alpha 6またはBetahttp://codeply.com/go/V9UQrvLWwz

 @media (min-width: 576px) {
     .sidebar {
          max-width: 280px;
     }
 }

<div class="container-fluid">
    <div class="row flex-nowrap">
        <div class="col-md-4 col-12 sidebar">

        </div>
        <div class="col-md col-12 main">
            <h2>Main (fluid width...)</h2>
        </div>
    </div>
</div>

参照： Twitter Bootstrapを使用して2列（固定-流体）レイアウトを作成する方法？

2018年に更新Bootstrap 4.0.0の例

21
Zim

container-fluidを含むdivにmargin-left: 200pxを含めてみてください（200pxはサイドバーの幅です）。

次に、たとえばposition: absoluteを使用してサイドバーを配置します

1
kartsims