How to space vertically stacked buttons in Bootstrap 3

浪尽此生 提交于 2019-12-07 15:39:27

问题


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>

回答1:


It is not neccessary to involve LESS.

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

Demo Fiddle



来源:https://stackoverflow.com/questions/18918921/how-to-space-vertically-stacked-buttons-in-bootstrap-3

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!