Bootstrap 警报令人不安 DOM

Question

我想在单击按钮时显示 bootstrap 警报。我已经在 Container-Fluid

的 div 下添加了 HTML 代码

HTML

<div class="alert alert-success pull-right right fade">
          <strong>Alert!</strong> Here is my message..
        </div>

JS

            $("#saveChanges").on("click", function() {
    $(".alert").removeClass("in").show();
  $(".alert").delay(500).addClass("in").fadeOut(5000);
});

结果：http://prntscr.com/9sum2y

我希望它出现并消失而不打扰整个页面。

Answer 1

删除警报中的 pull-right class 和 DIV 使其看起来像这样：

<div class="alert alert-success pull-right right fade">
      <strong>Alert!</strong> Here is my message..
    </div>

我认为它可以解决问题！[=11=]

Answer 2

检查 fiddle https://jsfiddle.net/nileshmahaja/p9u63v6c/3/

我已经为警报指定了绝对位置 div，所以它不应该扰乱结构，也不应该推动其他元素取代它的位置

HTML

<div class="container">
  <div class="alert alert-success fade">
    <strong>Alert!</strong> Here is my message..
  </div>
  <button class="btn btn-xs">Click me</button>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non odio ac neque laoreet tempor. Morbi luctus volutpat risus quis tempor. Pellentesque placerat massa ornare ligula tincidunt condimentum. Duis risus tortor, feugiat ut turpis ac, malesuada
    porta ex. Aenean eu suscipit nisi. Vestibulum risus urna, efficitur a dignissim et, tempus id massa. Sed in urna et dolor pulvinar fermentum. Quisque blandit eu turpis eget malesuada. Nullam rutrum id quam sed lacinia. Cras quis gravida sem. Curabitur
  </p>
</div>

css

.alert {
  position: absolute;
  display: none;
  left: 0;
  right: 0;
}

Bootstrap 警报令人不安 DOM

Bootstrap alert is disturbing DOM

html

css

alert