如何在 Bootstrap 3 中间隔垂直堆叠的按钮答案

【问题标题】：How to space vertically stacked buttons in Bootstrap 3如何在 Bootstrap 3 中间隔垂直堆叠的按钮
【发布时间】：2013-12-02 10:04:21
【问题描述】：

我想在 Bootstrap 3 中的一行中有 3 个按钮，但是当它更改为 xs 网格时，将它们垂直堆叠。我想在按钮之间引入一些间距（边距） - 但仅当按钮垂直堆叠时。我可以在 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>

【问题讨论】：

标签： css twitter-bootstrap less

【解决方案1】：

没有必要让 LESS 参与进来。

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

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

Demo Fiddle

【讨论】：