ブートストラップ4の12桁ではない等号カラム

Question

私は5列の幅が同じであることを示す小さなウェブアプリケーションを用意しています。

しかし、このレイアウトは幅が≥992pxのデバイスにのみ必要です。 デバイスの場合<幅992ピクセル5つのHTML要素を1つの全幅の行に表示したいとします。

等幅の列は、複数の行に分割することができるが、 明示flex-basis又はborderなく動作からこれを防ぐこと Safari flexbox bugがありました。

2つの回避策はreduced test case outside Bootstrapに記載されていますが、ブラウザが最新の場合は にする必要はありません。

出典：https://getbootstrap.com/docs/4.0/layout/grid/

だから、私はどのように私は私がこの「アイデア」を持っているが、私は思うのブートストラップ4.

を使用したい、この応答動作を実現することができますに少し混乱していますかなり醜いでしょう、あなたはそれについてどう思いますか？

はjQueryを使って私は.sepを選択することができ、幅< 992pxの場合にbootstrap4クラスw-100を追加する、のはその後

<div class="container"> 
    <div class="row"> 
    <div class="col">Column</div> 
    <div class="sep"></div> 
    <div class="col">Column</div> 
    <div class="sep"></div> 
    <div class="col">Column</div> 
    <div class="sep"></div> 
    <div class="col">Column</div> 
    </div> 
</div> 

このマークアップを考えてみましょう。

私の悪い英語を読んでいただきありがとうございます。

Answer 1

おそらく質問が分かりません。lg自動レイアウトの列（col-lg）を使用するだけではどうですか？

https://www.codeply.com/go/OohsSfM7Zu

<div class="row"> 
    <div class="col-lg"> 

    </div> 
    <div class="col-lg"> 

    </div> 
    <div class="col-lg"> 

    </div> 
    <div class="col-lg"> 

    </div> 
    <div class="col-lg"> 

    </div> 
</div> 

Answer 2

最初にブートストラップについて覚えておきたいのは、行はには12の列を含める必要があるということです。 12に入っていない番号の行（5など）がある場合は、オフセットを使用する必要があります。

たとえば、12/5は2であり、2が残っています。したがって、2の幅を占める列を使用し、合計で10列を使用したいとします。ここから、はとなり、左側は1となります。現在合計が11であることを考慮すると、右側には自動的に1がオフセットされています。

この

は以下に証明することができる。

.row { 
 
    margin: 0 !important; /* Prevent scrollbars in the fiddle */ 
 
    text-align: center; /* Helps illustrate the centralisation */ 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> 
 

 
<div class="row"> 
 
    <div class="col-sm-2 offset-sm-1">One</div> 
 
    <div class="col-sm-2">Two</div> 
 
    <div class="col-sm-2">Three</div> 
 
    <div class="col-sm-2">Four</div> 
 
    <div class="col-sm-2">Five</div> 
 
</div>

あなたはこのオフセットに満足していないなら、あなたはは単になどのカスタムメディアクエリーを利用することができますwidth: calc(100%/5) ...これはブートストラップの使用の点に完全に違反します。別のフレームワークがもっと適しているかもしれません:)