css - 如何在 Bootstrap 3 中垂直放置按钮

标签 css twitter-bootstrap less

我想在 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>

最佳答案

没有必要涉及LESS。

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

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

Demo Fiddle

关于css - 如何在 Bootstrap 3 中垂直放置按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18918921/

相关文章:

在 IE 中居中的 css 问题

html - 如何重叠CSS中的顶部div标签

html - ASP.Net 页面中 Container Fluid 的高度不是 100%

javascript - Meteor.js 找不到语义 :ui package

webpack - 自定义 Ant Design 的主题 : what exactly is that 'hack' key in the 'modifyVars' option of less-loader?

jquery - 进出动画有问题

javascript - 从 JSFiddle 发出复制代码

javascript - 如何使用数据元素的值作为选择器 jquery

html - 如何并排在 Bootstrap 列中制作嵌套的 div?

css - 为什么在编译我的 LESS 代码时会出现 Mixin undefined 错误?