我有一个模式,想在标题中添加一些详细信息和按钮。我有一个标题和关闭按钮。我还想在关闭按钮的左侧添加另一个按钮。即使设置了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>
关闭按钮旁边的右侧。我在做什么错?
我认为这是您想要的布局...
我相信您想使用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>
这是一个可行的示例,我没有更改任何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>