較小屏幕尺寸的自舉按鈕全寬度

我希望我的引導按鈕佔用較小屏幕的全屏幕寬度（很好，幾乎）。 btn-block確實使按鈕擴展，但對於所有類型的屏幕。較小屏幕尺寸的自舉按鈕全寬度

這個btn-block可以使用CSS（例如使用@media）進行自定義，以便它僅在較小的屏幕上激活？或者還有其他的方式嗎？

我的HTML按鈕的代碼行下面提到：

<button type="submit" class="btn btn-lg btn-success"> 
    Submit 
</button> 
<button type="reset" class="btn btn-lg btn-warning"> 
    Reset 
</button>

感謝

來源

2016-09-12 ABor

你在「行」「col」類中使用它嗎？ – Aravind

遺憾的是沒有一個'class'bootstrap來應用th是'效應'。你唯一能做的就是在CSS上使用@media。您可以使用它：

@media (max-width: 768px) { 
    .btn, .btn-group { 
     width:100%; 
    } 
}

您可以將按鈕上的「關口」類之一，但按鈕的「盒子」將不會跟隨它的內容的大小。

我希望它能幫助你。 :)

來源

2016-09-12 13:55:43

添加形式控制類

<button type="submit" class="btn btn-lg btn-success form-control"> 
    Submit 
</button> 
<button type="reset" class="btn btn-lg btn-warning form-control"> 
    Reset 
</button>

來源

2016-09-12 13:54:54 Aravind

不幸的是，'form-control'使得按鈕在任何時候都能達到100％的寬度，而不僅僅是在小屏幕上。 – nonzaprej

創建這個新的CSS類：

@media(max-width: 768px) { 
    button.full-width { 
     width: 100%; 
    } 
}

然後將它應用到你的按鈕：

<button type="submit" class="btn btn-lg btn-success full-width"> 
    Submit 
</button> 
<button type="reset" class="btn btn-lg btn-warning full-width"> 
    Reset 
</button>

在我看來，它比編輯自舉類爲Claudio B提出一個更好的主意。

來源

2016-09-12 14:04:24 Mistalis

謝謝。我可以問你一個額外的問題嗎？爲什麼在自制課程上進行操作比在預定義課程上進行的操作考慮更好的設計？ – ABor

編輯由Bootstrap定義的類可能會影響Bootstrap的正常運行：如果您這樣做，則應用程序的所有按鈕都將受到影響。在你的情況下，這是一個小小的改變，但是如果你的應用程序增長，你將無法有效地控制更改。專門爲此創建一個類（如我所建議的）更清潔，不需要修改Bootstrap的CSS。 – Mistalis

我想指出這是一個普遍的建議，它不僅適用於這種情況。我建議不要直接編輯Bootstrap文件，當它可以避免時:-) – Mistalis

較小屏幕尺寸的自舉按鈕全寬度

回答

相關問題