如何在Bootstrap 3中垂直堆叠按钮

时间:2013-09-20 14:14:16

标签: css twitter-bootstrap less

我想在Bootstrap 3中的一行中有3个按钮,但是当它更改为xs网格时,将它们垂直堆叠。我想在按钮之间引入一些间距(边距) - 但只有当按钮垂直堆叠时才会这样。我可以在没用的情况下这样做吗?

          <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>

1 个答案:

答案 0 :(得分:9)

没有必要涉及LESS。

您可以使用此代码将边距应用于宽度低于767px(或任何其他)的.btn-vert-block

@media (max-width: 767px) {
    .btn-vert-block + .btn-vert-block {
        margin-top: 10px;    
    }    
}

Demo Fiddle