如何在儀表板模板中添加禁止的警報？

我期待在引導模板： http://getbootstrap.com/docs/4.0/examples/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標籤的上方，則由於某種原因它不會完全顯示。

有什麼建議嗎？

來源

2017-10-13 Kaizer Sozay

也許我可以幫忙。

因此，在您看到的助推儀表板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>部分和滾動與它的其餘部分，並且這將是上方的顏色圓形部分。

來源

2017-10-14 01:32:11

如何在儀表板模板中添加禁止的警報？

回答

相關問題