模态 header 中的浮动按钮在关闭按钮旁边

Question

我有一个模态，想在 header 中添加一些细节和按钮。 我有一个标题和关闭按钮。 我还想在关闭按钮的左侧添加另一个按钮。 即使我设置了float-right浮动，该按钮仍会向左浮动。

我的代码：

<div class="modal-header">
                      <h5 class="modal-title"></h5>
                      <div class="float-right">
                        <a id='modal_csv'><i class="fas fa-camera"></i></a>
                      </div>

                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
                    </div>

我的 output：

我如何浮动

<div class="float-right">
   <a id='modal_csv'><i class="fas fa-camera"></i></a>
</div>

关闭按钮旁边的右侧。 我究竟做错了什么？

Answer 1

我认为这是您想要的布局...

我相信你想使用pull-right

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/> <div class="modal-header"> <h5 class="modal-title pull-left">Title</h5> <div class="pull-right"> <a id='modal_csv'><i class="fas fa-camera"></i></a> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> </div>

Answer 2

这是一个工作示例，我没有更改任何 html，也许您的 css 是错误的或者我不明白。

 html { font-family: Arial, Helvetica, sans-serif; }.modal-title { display: inline-block; }.modal-header { width: 300px; height: 60px; background: #e6e6e6; border-radius: 5px; padding: 5px; } h5 { font-size: 26px; margin: 14px 0; }.float-right, .close { float: right; margin: 20px 4px; } i { font-size: 22px; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/> <div class="modal-header"> <h5 class="modal-title">Mobile</h5> <div class="float-right"> <a id='modal_csv'><i class="fas fa-camera-retro"></i></a> </div> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div>