カスタムブートストラップグリッドの作成方法？

Question

私はこのようなカスタムブートストラップグリッドを作成しようとしているが、結果は良いものではありません。

これは私が作りたいグリッドです：

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-sm-3 box-area"> 
     <p>text</p> 
    </div> 
    <div class="col-sm-9 slide-area"> 
    </div> 
    </div> 
</div> 

Answer 1

ブートストラップのグリッドシステム応答します。基本的に、これらのグリッドは、画面サイズの異なるデバイスで常に変化しています。したがって、デスクトップのような大きな画面で作業する場合は、画面サイズが小さい他のデバイスに対処する必要があります。

私はグリッドシステムの仕組みについての基本について話し合うつもりですが、あなたが望むもののコードを作っていません。

キーブレークポイント

は、デバイスの画面サイズに関係するメディアクエリです。

• < 768px画面サイズ - 超小型デバイス（電話機）。
• 768px画面サイズ - 小型デバイス（タブレット）。
• 992px画面サイズ - 中程度のデバイス（デスクトップ）
• 1200px画面サイズ - 大型デバイス（大型デスクトップ）。

電話未満768pxの画面サイズを持つものであり、それは ...余分な小型デバイスとして

クラスプレフィックス

クラスプレフィックスを考えられますグリッドの作成に使用されるすべてのキーブレークポイントを指しています。

• col-xs - エクストラスモール（XS - < 768px）
• col-sm - 小（SM - 768px）
• col-md - ミディアム（MD - 992px）
• col-lg - 大（LG - 1200px）

グリッドシステムで作成できる全部で12個の列があります。その列自体は、クラスプレフィックスで分割して表示するのに適した画面サイズに応じて分割できます。

たとえば、 メディアデバイスの画面に3列に分割して内容を表示するとします。その場合は、クラス プレフィックスcol-mdを使用し、ウェブページで3つに分離するには、 の12列を3つに分割するので、クラスプレフィックスに4を追加する必要があります部品。だからクラスはcol-md-4になります。

ブートストラップのdocsですべてを読むことができます。いくつかの例がありますので、その使い方を十分に理解することができます。