Question

引导程序警报与Create Repository按钮重叠。

我尝试设置display:block，但是它不起作用。

https://jsfiddle.net/coolwei/8L5wzr79/2/

<a href="#">
  <button style="width:250px; display:block" class="btn btn-primary mb-3 float-right">Create Repository</button>
</a>
<div class="alert alert-success alert-dismissible" style="position: relative; display:block">
  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>     
  Success!!
</div>

Answer 1

警报与按钮重叠的原因是因为按钮设置为向右浮动。因此，紧随按钮的警报将围绕按钮流向另一侧。

要关闭浮动，您可以在浮动元素之后设置元素的clear属性。您的情况就是<alert />。

因此在警报上设置clear: right;将解决您的问题：

<a href="#">
    <button style="width:250px; display:block" class="btn btn-primary mb-3 float-right">
        Create Repository
    </button>
</a>
<div class="alert alert-success alert-dismissible" 
    style="position: relative; display:block; clear: right;">
    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>     
    Success!!
</div>

演示： https://jsfiddle.net/davidliang2008/tk8eqhm2/4/

替代

您无需使用.float-*就可以实现所需的目标。您只需要一个数据块元素<div />或<p />，并环绕定位标记即可。借助 Bootstrap ，您可以使用.btn将锚标签样式化为按钮。

<p class="text-right">
    <a href="#" class="btn btn-primary">
        Create Repository
    </a>
</p>
<div class="alert alert-success alert-dismissible">
    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>     
    Success!!
</div>

干净很多！

演示： https://jsfiddle.net/davidliang2008/z3q0s8uL/4/

引导程序警报重叠按钮

1 个答案:

替代