引导按钮中的边距和向右拉答案

【问题标题】：margin and pull-right in bootstrap buttons引导按钮中的边距和向右拉
【发布时间】：2017-05-05 21:30:51
【问题描述】：

您好，我正在尝试在我的按钮中应用 pull-right，但我注意到 2 件事：

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>

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

引导按钮是inline-block 元素，您可以简单地使用text-right 到父级来切换按钮。

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

【讨论】：

【解决方案2】：

你在这里：

.col-md-12 {
  background: gray;
  border: 1px solid black;
  height: 55px;
  padding-top: 9px; /*Visual improvement ;)*/
}

#btn-save2 {margin-left: 10px }

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

【讨论】：

【解决方案3】：

删除按钮上的class pull-right

添加Classparent div text-right

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

https://jsfiddle.net/wuuf5g87/6/

【讨论】：

【解决方案4】：

 <footer class="col-md-12 ">

<div class="pull-right">


    <a class="btn navbar-btn btn-primary " href="#" target="_texturepack">Save</a>
    <a class="btn navbar-btn btn-default" href="#" target="_texturepack">Cancel</a>

</div>
 </footer>

jsfiddle Working Demo

【讨论】：

【解决方案5】：

.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">
  <div style="float: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>
</div>
</footer>

【讨论】：