关闭按钮旁边的模态标题中的浮动按钮
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">×</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">×</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">×</span>
</button>
</div>
【讨论】:
以上是关于关闭按钮旁边的模态标题中的浮动按钮的主要内容,如果未能解决你的问题,请参考以下文章