SCSSブートストラップbtn-groupメディア複数のページを照会

Question

私はRubyでアプリケーションを開発中です。それは8ページを持ち、ページのそれぞれに一般的なレイアウトはブートストラップの.containerです。行.col-sm-6 .col-sm-6レイアウト。私は2番目のcol-sm-6レイアウトのbtn-groupを持っています。これはlg、xl、およびsデバイス上で素晴らしいです。

画面が不快な様式で992px-768pxボタン群区切りの間に入る

列は小画面544px-768pxとブレークに一方の上に他方を移動するときには十分に調整xsデバイスで再び悪い544px

btn-group-verticalを重複したコードに追加し、xsスクリーンを検出するまでこのコードを隠すコードを複製することで、xsスクリーン上でbtnグループを垂直にするという素晴らしいソリューションが見つかりました。水平btnグループ）。しかし、これは8ページに複製しなければならない重複したコードであり、中程度の画面では解決できません。

私はこのようなSCSSを追加することによって、自分のコードクリーナーを維持することについて考え：

.myClass { 

    @media (max-width: 760px) { 
     &:extend(.btn-group-vertical all); 
    } 

    @media (min-width: 761px) { 
     &:extend(.btn-group all); 
    } 
} 

私はそれも私が仕事だろうと思った操作では動作しませんスタックオーバーフローの質問31893581.に見つけたこと。私は同じ記事に記載されている解決策に従うことができますが、私はどのように衛生的であるかは不明です。

誰かが特定のブラウザの幅でブートストラップクラスを引き出すクラスを解決する方法について私に助言を私の問題とはまったく異なる解決策、私はすべての耳です。

ありがとうございます。

Answer 1

私は絵に簡単にしている2つの方法ですここでは、これを行うにはいくつかの方法を考えることができます。 https://codepen.io/panchroma/pen/XgojBL

は、メディアを使用し、あなたはボタンが破損したいポイントでclearfixのdiv要素を追加します。このdivを非表示または表示するためのクエリ。

clearfixを使用する代わりに、.btn-groupをCSSにターゲティングし、メディアクエリを使用して、ビューポート768〜992ピクセルで最大幅を設定することもできます。

幸運を祈る！

HTML

<div class="container"> 
    <div class="row"> 
    <div class="col-sm-6">first col</div> 
    <div class="col-sm-6"> 
     <div class="btn-group"> 
     <button type="button" class="btn btn-primary">btn-1</button> 
     <button type="button" class="btn btn-primary">btn-2</button> 
     <div class="cf"></div> 
     <button type="button" class="btn btn-primary">btn-3</button> 
     <button type="button" class="btn btn-primary">btn-4</button> 
     </div> 
    </div> 
    </div> 
</div> 

CSS

.btn-group .cf{ 
    display:none; 
} 

@media (min-width: 768px) and (max-width: 992px) { 
    .btn-group .cf{ 
    display:block; 
    } 
}