私はcontainer-fluid
コンテナー要素を使用しており、row-fluid
ではなくrow
を使用しています。
現在、row
クラスをrow-fluid
クラスに置き換えようとしていますが、いくつかの質問に遭遇しました。
最初に、row-fluid
の幅が.lessでどのように定義されているかを確認しました。これは完全に象形文字なので、誰かが説明してもらえますか?
さらに重要なのは、行をrow-fluid
で置き換えると、要素の高さが0に縮小され、.flufix要素が子の列を含むように成長するために、.clearfixクラスを含める必要があります。なぜこれが必要なのですか、つまり、何がフロートされているのか、そしてrow
をrow-fluid
に置き換えたのはなぜですか?
幅を知りたい要素によって異なります。 row-fluid
クラス自体の幅は100%
です。スパン(または列)には相対的な幅があり、100になるように設定されています。
フローティングでは、すべてのカラムがフローティングされ、これが流動性をもたらします。 row-fluid
が行う高さ関連の唯一のことは、min-height: 30px
を設定することです。これは、定義上、何もが高さ0に崩壊することを奇妙にしています。
古いグリッドの上でスタイリングを行ったことが主な問題の原因だと思います。
これがTwitter bootstrapが言うことです:
行は、適切な配置とパディングのために、.container(固定幅)または.container-fluid(全幅)内に配置する必要があります。
まあ、それはcontainer
ではなくrows
についてですが、その説明では不十分な場合は this is 簡単な説明でわかりやすくなります。
注:バージョン2の場合、row-fluid
自体はfloat: left
あなたが言うようにクリアする必要があるでしょう。
これは、Fluidグリッドがネストを異なる方法で利用するためです。ネストされた各レベルの列は、最大12列を追加する必要があります。これは、流体グリッドが幅の設定にピクセルではなくパーセンテージを使用するためです。
お役に立てれば :)
Bootstrap 2.xから3.0クラスへの変更 Bootstrap 2.x-> 。row-fluidおよびBootstrap 3.0-> 。row