html - 在 Bootstrap 中，如何在 sm 模式下将按钮设置为 "Stack"

Question

在 md 模式下，我有三个内联显示的按钮。但是对于 sm 和 xs 模式，我希望它们相互堆叠。有人可以帮忙吗？

.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">
	<div class="btn-toolbar-vertical">
		<input class="margin btn btn-primary btn-lg btn-block-md" type="button" id="btn1" value="Primary Button" />
		<input class="margin btn btn-success btn-lg btn-block-md" type="button" id="btn1" value="Secondary Button" />
		<input class="margin btn btn-info btn-lg btn-block-md" type="button" id="btn1" value="Cancel Button" />
	</div>
</div>

Answer 1

因为我们知道媒体查询的 Bootstrap 断点 http://getbootstrap.com/css/

您可以使用它来更改按钮在小型和超小型设备上的显示方式:

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

演示:http://codepen.io/anon/pen/ZeKQMj