html - Bootstrap 按钮中的 margin 和 pull-right

Question

您好，我正在尝试在我的按钮中应用右拉，但我注意到两件事:

1 - 取消按钮假设在左边但实际上不是，我的 html 使它在左边，但是在应用右拉之后取消按钮在保存之后。

2- 这是一种仅使用 boostrap 来在按钮之间留出余量的方法吗？现在按钮没有边距。

.col-md-12 {
  background: gray;
  border: 1px solid black;
  height: 50px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<footer class="col-md-12">
  <button class="btn btn-default pull-right" data-dismiss="modal" id="btn-cancel2" type="button">Cancel</button>
  <button class="btn btn-primary pull-right" data-dismiss="modal" id="btn-save2" type="button">Save</button>
</footer>

Answer 1

Bootstrap 按钮是 inline-block 元素，您可以简单地使用 text-right 将父元素转换​​为 shift 按钮。

.col-md-12 {
  background: gray;
  border: 1px solid black;
  height: 50px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<footer class="col-md-12 text-right">
  <button class="btn btn-default" data-dismiss="modal" id="btn-cancel2" type="button">Cancel</button>
  <button class="btn btn-primary" data-dismiss="modal" id="btn-save2" type="button">Save</button>
</footer>