在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模式下“堆叠”按钮

回答

相关问题