Gmailのブートストラップに似たポップアウトメニューグリッドを作成する最も良い方法は何ですか？</p> <p><a href="https://i.stack.imgur.com/NwWUT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NwWUT.png" alt="Gmail pop out"></a></p> <p>は、私はまったく同じことを実現したい：

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>