xsとsmの違いを扱うブートストラップ3

Question

私は肖像画で携帯端末にcol-xs- *を使用していますが、最初の答えfrom this questionによれば、col-sm- *実際にはありません。

私の質問は、どのように効果的に景色の携帯電話のcol構造を使用するのですか？

私の考えであった：

• COL-XS-12垂直移動
• COL-SM-6上の風景携帯電話で（それは明らかに広くなっているように）

しかし、SMため私がもともと考えていたものではありません。コアブートストラップCSSを変更せずに可能ですか？

例えば、iPhone 6+を見ると、その横向きの幅は736pxです。これはまだxsの範囲内とみなされます。

だから、このビューポート内の何かcol-xs-12は絶対に巨大に見えるので、状況はひどく見えます。

理論的には、私は768の現在の値よりも低いsmブレークポイントを変更することができますが、これを行うより良い方法はありますか？

おそらくxsとsmの間にクラスを追加しますか？

UPDATE

また、私は可能性を秘めている別の質問から、このスニペットを見つけました。

@media only screen and (min-width: 480px) and (max-width: 767px) { 
    .col-xsl-6{ width: 50%; } 
} 

Answer 1

他のアドバイスを参考にして、xsl colクラスを提案したようにすることが有益であると判断しました。

以下はCSSです。

/* Specifally landscape phones */ 
@media only screen and (min-width: 480px) and (max-width: 767px) { 

.col-xsl-1, .col-xsl-2, .col-xsl-3, .col-xsl-4, .col-xsl-5, .col-xsl-6, .col-xsl-7, .col-xsl-8, .col-xsl-9, .col-xsl-10, .col-xsl-11, .col-xsl-12 { 
     float: left; 
     position: relative; 
     min-height: 1px; 
     padding-right: 15px; 
     padding-left: 15px; 
    } 
    .col-xsl-12 { 
    width: 100%; 
    } 
    .col-xsl-11 { 
    width: 91.66666667%; 
    } 
    .col-xsl-10 { 
    width: 83.33333333%; 
    } 
    .col-xsl-9 { 
    width: 75%; 
    } 
    .col-xsl-8 { 
    width: 66.66666667%; 
    } 
    .col-xsl-7 { 
    width: 58.33333333%; 
    } 
    .col-xsl-6 { 
    width: 50%; 
    } 
    .col-xsl-5 { 
    width: 41.66666667%; 
    } 
    .col-xsl-4 { 
    width: 33.33333333%; 
    } 
    .col-xsl-3 { 
    width: 25%; 
    } 
    .col-xsl-2 { 
    width: 16.66666667%; 
    } 
    .col-xsl-1 { 
    width: 8.33333333%; 
    } 
    .col-xsl-pull-12 { 
    right: 100%; 
    } 
    .col-xsl-pull-11 { 
    right: 91.66666667%; 
    } 
    .col-xsl-pull-10 { 
    right: 83.33333333%; 
    } 
    .col-xsl-pull-9 { 
    right: 75%; 
    } 
    .col-xsl-pull-8 { 
    right: 66.66666667%; 
    } 
    .col-xsl-pull-7 { 
    right: 58.33333333%; 
    } 
    .col-xsl-pull-6 { 
    right: 50%; 
    } 
    .col-xsl-pull-5 { 
    right: 41.66666667%; 
    } 
    .col-xsl-pull-4 { 
    right: 33.33333333%; 
    } 
    .col-xsl-pull-3 { 
    right: 25%; 
    } 
    .col-xsl-pull-2 { 
    right: 16.66666667%; 
    } 
    .col-xsl-pull-1 { 
    right: 8.33333333%; 
    } 
    .col-xsl-pull-0 { 
    right: auto; 
    } 
    .col-xsl-push-12 { 
    left: 100%; 
    } 
    .col-xsl-push-11 { 
    left: 91.66666667%; 
    } 
    .col-xsl-push-10 { 
    left: 83.33333333%; 
    } 
    .col-xsl-push-9 { 
    left: 75%; 
    } 
    .col-xsl-push-8 { 
    left: 66.66666667%; 
    } 
    .col-xsl-push-7 { 
    left: 58.33333333%; 
    } 
    .col-xsl-push-6 { 
    left: 50%; 
    } 
    .col-xsl-push-5 { 
    left: 41.66666667%; 
    } 
    .col-xsl-push-4 { 
    left: 33.33333333%; 
    } 
    .col-xsl-push-3 { 
    left: 25%; 
    } 
    .col-xsl-push-2 { 
    left: 16.66666667%; 
    } 
    .col-xsl-push-1 { 
    left: 8.33333333%; 
    } 
    .col-xsl-push-0 { 
    left: auto; 
    } 
    .col-xsl-offset-12 { 
    margin-left: 100%; 
    } 
    .col-xsl-offset-11 { 
    margin-left: 91.66666667%; 
    } 
    .col-xsl-offset-10 { 
    margin-left: 83.33333333%; 
    } 
    .col-xsl-offset-9 { 
    margin-left: 75%; 
    } 
    .col-xsl-offset-8 { 
    margin-left: 66.66666667%; 
    } 
    .col-xsl-offset-7 { 
    margin-left: 58.33333333%; 
    } 
    .col-xsl-offset-6 { 
    margin-left: 50%; 
    } 
    .col-xsl-offset-5 { 
    margin-left: 41.66666667%; 
    } 
    .col-xsl-offset-4 { 
    margin-left: 33.33333333%; 
    } 
    .col-xsl-offset-3 { 
    margin-left: 25%; 
    } 
    .col-xsl-offset-2 { 
    margin-left: 16.66666667%; 
    } 
    .col-xsl-offset-1 { 
    margin-left: 8.33333333%; 
    } 
    .col-xsl-offset-0 { 
    margin-left: 0; 
    } 
} 

は、確かにおそらくちょうどブートストラップ4を待つか、LESS CSSを使用する方が簡単ですが、あなたが単純化、CSSのみソリューションの外観をしている場合、これはトリックを行う必要があります。

Answer 2

最も簡単な方法は、LESSを使用してsmブレークポイントを変更するには、次のようになります。

@import "bootstrap.less"; 
@screen-sm-min: 736px; 

http://www.codeply.com/go/g3Qtejhoui

ます。またgenerate a custom CSS build同じ@screen-sm-min変数を変更することができます。