小さな画面でブートストラップの.btn-groupを削除する

Question

ボタンのリストを生成するのに、そして.btn-groupを使用してボタンをグループ化するために、以下のHTMLタグを使用しています。

ようなビューを生成します。しかし、モバイルのような小型デバイス上でページを表示するには、ビューは小さなデバイスで

としてレンダリングされる

<div class="btn-group mt-30"> 
    <a class="btn btn-border-d btn-circle" href="#"> 
     exmaple 1 
    </a> 
    <a class="btn btn-border-d btn-circle" href="#"> 
     example 2 
    </a> 
    <a class="btn btn-border-d btn-circle" href="#"> 
     example 3 
    </a> 
</div> 

、私は.btn-groupクラスを削除したいです小さいデバイスでは、新しいボタンの各ボタンを新しい線でレンダリングしたいので、

をdivから削除すると、3番目の画像が表示されます。

にはどうすればmdまたはlgで、すなわち、唯一の大規模なデバイス上で.btn-groupを適用し、sm、xsでそれをディアブルことができますか？

Answer 1

あなたは小さなデバイスに.btn-group .btnを上書きする必要があります。

@media (max-width: 760px) { 
    .btn-group .btn.btn-circle { 
     border-radius: 10px; 
     display: block; 
     float: none; 
    } 
} 

Answer 2

@Justinas'答えは、おそらくこのような場合のためのより良いですが、実際には異なるサイズのディスプレイに異なるマークアップを持っていると思った場合は、ブートストラップのを使用することができますResponsive Utilities。

<div class="btn-group mt-30 hidden-sm hidden-xs"> 
    <a class="btn btn-border-d btn-circle" href="#"> 
     exmaple 1 
    </a> 
    <a class="btn btn-border-d btn-circle" href="#"> 
     example 2 
    </a> 
    <a class="btn btn-border-d btn-circle" href="#"> 
     example 3 
    </a> 
</div> 

と小さなデバイス上：

<div class="visible-sm-block visible-xs-block"> 
    <a class="btn btn-border-d btn-circle" href="#"> 
     exmaple 1 
    </a> 
    <a class="btn btn-border-d btn-circle" href="#"> 
     example 2 
    </a> 
    <a class="btn btn-border-d btn-circle" href="#"> 
     example 3 
    </a> 
</div>