制造麻烦的Bootstrap警报覆盖了一个有排的jumbotron

Trouble making Bootstrap alert overlay a jumbotron with rows

本文关键字：一个 jumbotron Bootstrap 麻烦制造覆盖更新时间：2023-09-26

嘿，我仍然习惯于创建网站，我正在想办法创建这样的东西：

<div class="alert alert-danger alert-dismissible fade in" role="alert">
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                 <span aria-hidden="true">&times;</span></button>
          <h4>This is an alert!</h4>
          <p>
                 <button class="btn btn-danger" type"button">Danger Action</button>
                 <button class="btn btn-default" type="button">Cancel</button>
          </p>
</div>

出现在整个被分成几排的巨型机上。我不会对此保持警惕，也不会接受建议。我需要能够将其他元素放入警报中，如果不透明，我希望能够看到它背后的jumbotron。

下面是我要介绍的jumbotron的一个例子：

<div class="jumbotron">
                <div class="container">
                <!--Row with two equal columns-->
                    <div class="row">
                        <div class="col-md-6">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p><a target="_blank" class="btn btn-success btn-lg">Get started today</a></p>
                        </div>
                        <div class="col-md-6">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p><a  target="_blank" class="btn btn-success btn-lg">Get started today</a></p><p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p><a target="_blank" class="btn btn-success btn-lg">Get started today</a></p>
                        </div>
                        <div class="col-md-6">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p><a target="_blank" class="btn btn-success btn-lg">Get started today</a></p>
                        </div>
                    </div>
                </div>
            </div>

如果高度可以是动态的，那么您可以在警报上切换类。为了更容易地添加/删除类，我稍微更改了您的html标记。

这是一个全屏示例

这是JS-FIDDLE

function myAlert() {
    $(".jumbotron").addClass("alert alert-danger alert-dismissible fade in");
    $(".main").addClass("hidden");
    $(".myAlert").removeClass("hidden");
}
function danger() {
    alert("you just alerted some danger");
}
function cancel() {
    $(".jumbotron").removeClass("alert alert-danger alert-dismissible fade in");
    $(".main").removeClass("hidden");
    $(".myAlert").addClass("hidden");
}