In Bootstrap動態改變下拉寬度

Question

考慮，ui包含10多個li元素，前四個li元素應放置在第一列的下一個四列到下一列從左邊依次類推。 下拉寬度根據li元素增加.. 但對於下拉菜單中沒有固定的寬度..

（據李元素下拉下來寬度變化）

Answer 1

如果我理解正確你想實現類似的多列下拉一個可以在這裏找到的http://alijafarian.com/bootstrap-multi-column-dropdown-menu/其中呈現如下

HTML

<nav class="navbar navbar-default" role="navigation"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Brand</a> 
    </div> 
    <!--/.navbar-header--> 

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">One Column <b class="caret"></b></a> 
       <ul class="dropdown-menu"> 
        <li><a href="#">Action</a></li> 
        <li><a href="#">Another action</a></li> 
        <li><a href="#">Something else here</a></li> 
        <li class="divider"></li> 
        <li><a href="#">Separated link</a></li> 
        <li class="divider"></li> 
        <li><a href="#">One more separated link</a></li> 
       </ul> 
      </li> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Two Column <b class="caret"></b></a> 
       <ul class="dropdown-menu multi-column columns-2"> 
        <div class="row"> 
         <div class="col-sm-6"> 
          <ul class="multi-column-dropdown"> 
           <li><a href="#">Action</a></li> 
           <li><a href="#">Another action</a></li> 
           <li><a href="#">Something else here that's extra long so we can see how it looks</a></li> 
           <li class="divider"></li> 
           <li><a href="#">Separated link</a></li> 
           <li class="divider"></li> 
           <li><a href="#">One more separated link</a></li> 
          </ul> 
         </div> 
         <div class="col-sm-6"> 
          <ul class="multi-column-dropdown"> 
           <li><a href="#">Action</a></li> 
           <li><a href="#">Another action</a></li> 
           <li><a href="#">Something else here</a></li> 
           <li class="divider"></li> 
           <li><a href="#">Separated link</a></li> 
           <li class="divider"></li> 
           <li><a href="#">One more separated link</a></li> 
          </ul> 
         </div> 
        </div> 
       </ul> 
      </li> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Three Column <b class="caret"></b></a> 
       <ul class="dropdown-menu multi-column columns-3"> 
        <div class="row"> 
         <div class="col-sm-4"> 
          <ul class="multi-column-dropdown"> 
           <li><a href="#">Action</a></li> 
           <li><a href="#">Another action</a></li> 
           <li><a href="#">Something else here</a></li> 
           <li class="divider"></li> 
           <li><a href="#">Separated link</a></li> 
           <li class="divider"></li> 
           <li><a href="#">One more separated link</a></li> 
          </ul> 
         </div> 
         <div class="col-sm-4"> 
          <ul class="multi-column-dropdown"> 
           <li><a href="#">Action</a></li> 
           <li><a href="#">Another action</a></li> 
           <li><a href="#">Something else here</a></li> 
           <li class="divider"></li> 
           <li><a href="#">Separated link</a></li> 
           <li class="divider"></li> 
           <li><a href="#">One more separated link</a></li> 
          </ul> 
         </div> 
         <div class="col-sm-4"> 
          <ul class="multi-column-dropdown"> 
           <li><a href="#">Action</a></li> 
           <li><a href="#">Another action</a></li> 
           <li><a href="#">Something else here</a></li> 
           <li class="divider"></li> 
           <li><a href="#">Separated link</a></li> 
           <li class="divider"></li> 
           <li><a href="#">One more separated link</a></li> 
          </ul> 
         </div> 
        </div> 
       </ul> 
      </li> 
      <li><a href="#">Link</a></li> 
     </ul> 
    </div> 
    <!--/.navbar-collapse--> 
</nav> 
<!--/.navbar--> 

CSS

.dropdown-menu { 
    min-width: 200px; 
} 
.dropdown-menu.columns-2 { 
    min-width: 400px; 
} 
.dropdown-menu.columns-3 { 
    min-width: 600px; 
} 
.dropdown-menu li a { 
    padding: 5px 15px; 
    font-weight: 300; 
} 
.multi-column-dropdown { 
    list-style: none; 
} 
.multi-column-dropdown li a { 
    display: block; 
    clear: both; 
    line-height: 1.428571429; 
    color: #333; 
    white-space: normal; 
} 
.multi-column-dropdown li a:hover { 
    text-decoration: none; 
    color: #262626; 
    background-color: #f5f5f5; 
} 

@media (max-width: 767px) { 
    .dropdown-menu.multi-column { 
     min-width: 240px !important; 
     overflow-x: hidden; 
    } 
}