Question

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

1 - 取消按钮假设在左边但不是，我的html make在左边，但在应用pull-right之后取消按钮在保存之后。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

你在这里：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

Bootstrap按钮是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>

Answer 3

删除按钮上的class pull-right

添加Class parent 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/

Answer 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

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

自举按钮中的边距和右拉

5 个答案: