在Bootstrap中，如何在sm模式下「堆疊」按鈕

我有三個按鈕在md模式下以內聯方式顯示。但對於sm和xs模式，我希望它們彼此堆疊。有人可以幫忙嗎？在Bootstrap中，如何在sm模式下「堆疊」按鈕

.margin{ 
 
    margin: 5px 10px 5px 5px; 
 
}

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
\t <div class="btn-toolbar-vertical"> 
 
\t \t <input class="margin btn btn-primary btn-lg btn-block-md" type="button" id="btn1" value="Primary Button" /> 
 
\t \t <input class="margin btn btn-success btn-lg btn-block-md" type="button" id="btn1" value="Secondary Button" /> 
 
\t \t <input class="margin btn btn-info btn-lg btn-block-md" type="button" id="btn1" value="Cancel Button" /> 
 
\t </div> 
 
</div>

來源

2017-03-10 Kyle

由於某些原因，我無法附上屏幕截圖：所以在這裏他們是：基本上我不想在屏幕3之間： https://i.stack.imgur.com/mZHqg.png https ：//i.stack.imgur.com/5Riql.png https://i.stack.imgur.com/3fZvq.png – Kyle

因爲我們知道引導斷點媒體查詢http://getbootstrap.com/css/

你可以用它來改變按鈕顯示在小型和超小型設備這樣的方式：

@media only screen and (max-width : 768px) { 
    .btn-toolbar-vertical > .btn{ 
    display: block; 
    } 
}

DEMO：http://codepen.io/anon/pen/ZeKQMj

來源

2017-03-11 07:23:09

謝謝，這正是我正在尋找的。 – Kyle

Lucka，爲什麼我不能做同樣的鏈接按鈕？http：//codepen.io/anon/pen/yMXzzx鏈接按鈕展開。我查看它使用內聯塊，但它毀壞了堆棧，我不能只設置一個最大寬度，因爲內容可能很長。任何想法？ – Kyle

嘗試將'display：block;'更改爲'display：table;'。如果我理解正確，它可能會有所幫助。 –

在Bootstrap中，如何在sm模式下「堆疊」按鈕

回答

相關問題