Кнопка перекрытия предупреждений при загрузке

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/