bootstrapバリアシステムの転位問題
2097 ワード
プロジェクトでdivは属性class=「col-size-x」//sizeの値をxs、sm、md、lgに設定できます。x値は1−12であり、このdivが本行のx／12を占有することができる。
.col-xs-超小型スクリーン携帯（<768 px）.col-sm-小スクリーンフラットパネル（≧768 px）.col-md-中ぐらいスクリーンデスクトップディスプレイ（≧992 px）.col-lg-大画面大デスクトップディスプレイ（≧1200 px）
大きな画面で開発されていますので、ずっと一つのcol-lg-x属性だけを書いています。ページの入れ子になると、一つのrowに定義されている要素が複数の行に分かれて表示されます。
ソリューション:
ある元素の占有率の幅の割合を一定に確定する時、すべてのスクリーンを大きさのクラスの属性に適応してすべて書きます。
グリッドシステムについて比較的詳細な文章リンクを記述する。 http://www.jb51.net/article/75386.htm
転載先:https://www.cnblogs.com/Jacck/p/7696015.html
.col-xs-超小型スクリーン携帯（<768 px）.col-sm-小スクリーンフラットパネル（≧768 px）.col-md-中ぐらいスクリーンデスクトップディスプレイ（≧992 px）.col-lg-大画面大デスクトップディスプレイ（≧1200 px）
大きな画面で開発されていますので、ずっと一つのcol-lg-x属性だけを書いています。ページの入れ子になると、一つのrowに定義されている要素が複数の行に分かれて表示されます。
ソリューション:
ある元素の占有率の幅の割合を一定に確定する時、すべてのスクリーンを大きさのクラスの属性に適応してすべて書きます。
<div class="row">
<div class="clo-lg-4 col-md-4 col-sm-4 col-xs-4">
div1
div>
<div class="clo-lg-4 col-md-4 col-sm-4 col-xs-4">
div2
div>
<div class="clo-lg-4 col-md-4 col-sm-4 col-xs-4">
div3
div>
div>グリッドシステムについて比較的詳細な文章リンクを記述する。 http://www.jb51.net/article/75386.htm
転載先:https://www.cnblogs.com/Jacck/p/7696015.html