如何在Bootstrap 3中间隔垂直堆叠的按钮 [英] How to space vertically stacked buttons in Bootstrap 3
本文介绍了如何在Bootstrap 3中间隔垂直堆叠的按钮的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想在Bootstrap 3中连续有3个按钮,但是当它更改为xs网格时,垂直堆叠它们.我想在按钮之间引入一些间距(边距)-但仅当按钮垂直堆叠时才行.我可以在LESS中做到这一点吗?
I want to have 3 buttons across a row in Bootstrap 3, but when it changes to the xs grid, stack them vertically. I'd like to introduce some spacing (margin) between the buttons - but only when the buttons are stacked vertically. Can I do this in LESS?
<div class="row">
<div class="col-sm-4 btn-vert-block">
<span>
<button type="button" class="btn btn-primary btn-block">Go Back</button>
</span>
</div>
<div class="col-sm-4 btn-vert-block">
<span>
<button type="button" class="btn btn-primary btn-block center-block">Preview</button>
</span>
</div>
<div class="col-sm-4 btn-vert-block">
<span class="">
<button type="button" class="btn btn-success pull-right btn-block">Go Next</button>
</span>
</div>
</div>
推荐答案
不需要LESS.
您可以使用以下代码将边距应用于宽度小于767像素(或其他任意宽度)的.btn-vert-block
:
You can use this code, for applying margins to .btn-vert-block
below 767px width (or any other):
@media (max-width: 767px) {
.btn-vert-block + .btn-vert-block {
margin-top: 10px;
}
}
这篇关于如何在Bootstrap 3中间隔垂直堆叠的按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文