創建類似Gmail中Bootstrap的彈出式菜單網格的最佳方式是什麼？

Question

Gmail中有變成一個蹦出來的菜單，像這樣的網格圖標：

我想要實現同樣的事情。我的導航欄中已有網格圖標作爲按鈕。

我當時在看Modals，但是我很難弄清楚如何讓模塊在單擊並調整窗口大小時保持「連接」按鈕。有人可以快速實施這個人可以向我解釋？

Answer 1

我會嘗試自定義Dropdown，就像這樣。我認爲這是一個好的開始。

.dropdown-menu .item { 
 
    margin: 10px; 
 
    text-align: center; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
<div class="btn-group"> 
 
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
    Action <span class="caret"></span> 
 
    </button> 
 
    <div class="dropdown-menu row"> 
 
    <div class="item col-xs-4"> 
 
     ICON 
 
     <strong>Name</strong> 
 
    </div> 
 
    <div class="item col-xs-4"> 
 
     ICON 
 
     <strong>Name</strong> 
 
    </div> 
 
    <div class="item col-xs-4"> 
 
     ICON 
 
     <strong>Name</strong> 
 
    </div> 
 
    <div class="item col-xs-4"> 
 
     ICON 
 
     <strong>Name</strong> 
 
    </div> 
 
    <div class="item col-xs-4"> 
 
     ICON 
 
     <strong>Name</strong> 
 
    </div> 
 
    <div class="item col-xs-4"> 
 
     ICON 
 
     <strong>Name</strong> 
 
    </div> 
 
    </div> 
 
</div>