web-dev-qa-db-ja.com

Ant DesignReact。 Bootstrapグリッド「コンテナ」の概念

Ant DesignにReact Bootstrap Grid "container"コンセプト」はありますか？

コンテナはBootstrapの最も基本的なレイアウト要素であり、デフォルトのグリッドシステムを使用する場合に必要です。レスポンシブな固定幅のコンテナ（各ブレークポイントでの最大幅の変更を意味します）または流動的なものから選択します-幅（常に100％広いことを意味します）。

コンテナはネストできますが、ほとんどのレイアウトではネストされたコンテナは必要ありません。

<div class="container">
  <!-- Content here -->
</div>
twitter-bootstrapreactjstwitter-bootstrap-3antdantd-mobile
7
user4412054

Antdは、グリッドシステム内にコンテナを提供していません。ただし、独自のコンテナクラスを作成することはできます。

これがあなたがそれをすることができる方法です：

@import "~antd/lib/style/index";

.container {
    width: 100%;
    display: flex;
    align-self: center;
    margin: auto;
}

.make-container(@minWidth, @breakpoint) {
    @media (min-width: @minWidth) {
        .container {
            max-width: @breakpoint;
        }
    }
}

.make-container(@screen-xs-min, @screen-xs);
.make-container(@screen-sm-min, @screen-sm);
.make-container(@screen-md-min, @screen-md);
.make-container(@screen-lg-min, @screen-lg);
.make-container(@screen-xl-min, @screen-xl);
.make-container(@screen-xxl-min, @screen-xxl); // Optional

その後、ブートストラップの場合と同じようにクラスを使用できます

<div class="container"></div>
4
Fabrizio Fenoglio

さて、 ドキュメント を調べると、グリッドシステムはColsとRowsで構成されています。 React-Bootstrap <Grid />（containerクラスのコンポーネント）のようなものはありません

1
Tomasz Mularczyk