web-dev-qa-db-ja.com

Twitterでの行の流体と行の比較bootstrap

私はcontainer-fluidコンテナー要素を使用しており、row-fluidではなくrowを使用しています。
現在、rowクラスをrow-fluidクラスに置き換えようとしていますが、いくつかの質問に遭遇しました。
最初に、row-fluidの幅が.lessでどのように定義されているかを確認しました。これは完全に象形文字なので、誰かが説明してもらえますか?

さらに重要なのは、行をrow-fluidで置き換えると、要素の高さが0に縮小され、.flufix要素が子の列を含むように成長するために、.clearfixクラスを含める必要があります。なぜこれが必要なのですか、つまり、何がフロートされているのか、そしてrowrow-fluidに置き換えたのはなぜですか?

14
Derek

幅を知りたい要素によって異なります。 row-fluidクラス自体の幅は100%です。スパン(または列)には相対的な幅があり、100になるように設定されています。

フローティングでは、すべてのカラムがフローティングされ、これが流動性をもたらします。 row-fluidが行う高さ関連の唯一のことは、min-height: 30pxを設定することです。これは、定義上、何もが高さ0に崩壊することを奇妙にしています。

古いグリッドの上でスタイリングを行ったことが主な問題の原因だと思います。

6
gpgekko

これがTwitter bootstrapが言うことです:

行は、適切な配置とパディングのために、.container(固定幅)または.container-fluid(全幅)内に配置する必要があります。

まあ、それはcontainerではなくrowsについてですが、その説明では不十分な場合は this is 簡単な説明でわかりやすくなります。

注:バージョン2の場合、row-fluid自体はfloat: leftあなたが言うようにクリアする必要があるでしょう。

これは、Fluidグリッドがネストを異なる方法で利用するためです。ネストされた各レベルの列は、最大12列を追加する必要があります。これは、流体グリッドが幅の設定にピクセルではなくパーセンテージを使用するためです。

お役に立てれば :)

3
Rishabh Shah

Bootstrap 2.xから3.0クラスへの変更 Bootstrap 2.x-> 。row-fluidおよびBootstrap 3.0-> 。row

2
Indranil