Question

我正在查看引导程序模板： http://getbootstrap.com/docs/4.0/examples/dashboard/

我希望这段代码显示在顶部导航栏的下方，该导航栏包含“主页，设置，个人资料，帮助等”，但是在其中显示“Dashboard”且具有大圆圈图像的区域：

<div class="alert alert-dismissible alert-success"> 
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button> 
    <strong>Logged in!</strong> You Logged in!
</div>

但我无法弄清楚如何将它放在那里！如果我将它放在header下面，它会被侧边栏遮挡。如果我将它放在main标记的正上方，则由于某种原因它不会完全显示。

有什么建议吗？

Answer 1

也许我可以提供帮助。

因此，在您正在关注的boostrap仪表板template中，您应该特别注意元素布局的一些事项。

<main>元素是大部分内容应该出现的地方
<main>元素从左侧偏移，带有边距
<nav>之前的<main>元素位于该边距空间

这意味着，如果您要添加任何内容以便与<main>的其余内容一起滚动，则应将其添加为<main>的子。如果将警报置于标题之后，警报会被遮挡的原因是它不在顶部导航栏之后的容器内。如果你把它放在<main>之前，那么它与<main>左边的边距不同，并且会放在垂直菜单下。

所以你想要做的是这样的事情：

<div className="container-fluid">
   <div className="row">
      <nav className="col-sm-3 col-md-2 d-none d-sm-block bg-light sidebar">...</nav>
      <main className="col-sm-9 ml-sm-auto col-md-10 pt-3" role="main">
         <h1>Dashboard</h1>

         <!-- This is where you can put your new code -->

         <section className="row text-center placeholder">
            <div class="alert alert-dismissible alert-success"> 
               <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button> 
               <strong>Logged in!</strong> You Logged in!
            </div>
         </section>

         <!-- End your code -->

         <section className="row text-center placeholder">
         </section>
      </main>
   </div>
</div>

通过这种方式，您的新组件位于主<main>部分，并与其余部分一起滚动，并且它将位于彩色圆圈部分的上方。

如何在仪表板模板中添加可允许的警报？

1 个答案: