Question

我有两个按钮，我想用浮动交换它们。我该怎么办？

＆＃13;

<div class="modal-footer">
  <button type="button" class="btn btn-default">Cancel</button>
  <button type="button" class="btn btn-primary" data-dismiss="modal">Delete</button>
</div>

＆＃13;

谢谢。任何帮助将不胜感激。

Answer 1

.right {
  float: right;
  }
.left {
  float: left;
  }

<div class="modal-footer">
  <button type="button" class="right btn btn-default">Cancel</button>
  <button type="button" class="left btn btn-primary" data-dismiss="modal">Delete</button>
</div>

你也可以使用 order: 1和order: -1

.modal-footer {
  display: -webkit-flex; /* Safari */
  display: flex;
}
.first {
  order: 1
}
.second {
  order: 2
}

<div class="modal-footer">
  <button type="button" class="second btn btn-default">Cancel</button>
  <button type="button" class="first btn btn-primary" data-dismiss="modal">Delete</button>
</div>

阅读CSS order property

Answer 2

使用flexbox：

您可以使用flexbox属性order。与属性名称一样，更改了flex-items的顺序。

更多信息 here 。

代码段：

＆＃13;

.modal-footer {
  display: flex;
  justify-content: flex-end;
}
.modal-footer .btn:last-of-type {
  order: -1;
}

＆＃13;

<div class="modal-footer">
  <button type="button" class="btn btn-default">Cancel</button>
  <button type="button" class="btn btn-primary" data-dismiss="modal">Delete</button>
</div>

＆＃13;

Answer 3

使用其他CSS，您可以将bottomBar按钮浮动到右侧。

＆＃13;

cancel

＆＃13;

.modal-footer .btn-default {
  float:right
}

＆＃13;

`<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="screen" charset="utf-8"> <div class="modal-footer"> <button type="button" class="btn btn-default">Cancel</button> <button type="button" class="btn btn-primary" data-dismiss="modal">Delete</button> </div>`

您可以在第一个按钮--- pull-right上使用其中一个辅助类。

＆＃13;

or

＆＃13;

您可能还需要添加clearfix，具体取决于模式中的其他内容。

如何在CSS中使用float交换两个按钮元素

3 个答案:

代码段：