javascript - Bootstrap 警报在大屏幕上覆盖行时出现问题

Question

嘿，我还在习惯创建网站，我正在尝试弄清楚如何创建这样的东西:

<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>

显示在已分成几行的整个大屏幕上。我并没有意识到要这样做，也没有接受建议。我需要能够将其他元素放入警报中，如果不透明，我希望能够看到其后面的大屏幕。

这是我要介绍的大屏幕示例:

<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>

Answer 1

如果高度可以是动态的，那么您只需切换警报的类别即可。我稍微更改了您的 html 标记，以便更轻松地添加/删除类。

这是一个full screen example

这是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");
}