將媒體查詢設置CSS等於BootStrap類

希望這是一個簡單的CSS問題。我有以下BootStrap按鈕，我希望縮小屏幕尺寸（參見下文）。從本質上說我有什麼改變類「BTN BTN-默認BTN-XS」將媒體查詢設置CSS等於BootStrap類

<button type="button" class="btn btn-default btn-sm" id="myButton" > 
    <span class="glyphicon glyphicon-envelope"></span> 
</button>

我想我必須使用媒體查詢。我可以通過使用ID選擇器以某種方式將我的類設置爲等於引導類？（見下面的僞代碼）

@media only screen and (max-width: 450px) { 

    #myButton { 
     .btn .btn-default .btn-xs // Inject magic here 
    } 
}

感謝

來源

2017-07-11 Conor

不確定它是否重複。解決方案我看到創建自己的CSS爲不同的媒體大小。我想知道是否有一種方法仍然使用默認的BootStrap CSS類，如sm和xs，通過id選擇器分配它們。 – Conor

以下是您通過@media查詢控制#myButton的CSS的方法。

<button type="button" class="btn btn-default btn-sm" id="myButton" > 
    <span class="glyphicon glyphicon-envelope"></span> 
</button> 

@media only screen and (max-width: 450px) { 

    #myButton { 
     font-size: 12px; 
    } 
} 

@media only screen and (max-width: 768px) { 

    #myButton { 
      font-size: 16px; 
    } 
}

來源

2017-07-11 23:13:11 xxLITxx

謝謝，這對我很有用。 – Conor

有你的問題在這裏的一些偉大的答案：resize buttons responsively in bootstrap

就個人而言，我喜歡讓按鈕大小響應使用視圖width屬性。

#myButton { 
    width: 20vw; 
    padding: 10px; 
    }

來源

2017-07-11 23:11:06

謝謝，那個鏈接很有用 – Conor

將媒體查詢設置CSS等於BootStrap類

回答

相關問題