关闭按钮旁边的模态标题中的浮动按钮

Posted

技术标签:

【中文标题】关闭按钮旁边的模态标题中的浮动按钮【英文标题】:Float button right in modal header next to close button 【发布时间】:2020-02-02 02:45:30 【问题描述】:

我有一个模式,想在标题中添加一些细节和按钮。我有一个标题和关闭按钮。我还想在关闭按钮的左侧添加另一个按钮。即使我设置了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>

我的输出:

我如何浮动

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

在关闭按钮的右侧。我做错了什么?

【问题讨论】:

将 div 放在关闭按钮之后。 @A.Meshu,关闭后相机链接不会移动吗?我要在收盘前和旁边 【参考方案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>

【讨论】:

【参考方案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>

【讨论】:

以上是关于关闭按钮旁边的模态标题中的浮动按钮的主要内容,如果未能解决你的问题,请参考以下文章

将关闭按钮添加到部分不在视图中的模态视图

使用 Android 设计支持库中的浮动操作按钮的浮动操作菜单实现 [关闭]

单击vue组件中的保存按钮后如何关闭模态?

带有浮动操作按钮的循环进度[关闭]

模态viewController关闭按钮问题

Bootstrap 模式关闭按钮