將列添加到導航欄下拉列表

我想添加一列到學術事務中，這樣我就可以有兩組四個相鄰的鏈接，但是我在每次嘗試時都失敗了。任何幫助將不勝感激。將列添加到導航欄下拉列表

</button><div class="navbar navbar-inverse"> 
    <div class="navbar-header"> 
     <button 
     <a href="#" class="navbar-brand">IBHE</a> 
     </div><!--enf of navbar-header --> 

    <div class="navbar-collapse collapse"> 
    <ul class="nav navbar-nav"> 
     <li class="active"><a href="#"><span class="glyphicon glyphicon-home">Home</a></li> 
     <li><a href="#" class="dropdown-toggle" data-toggle="dropdown">Executive Director's Corner</a> 

    <ul class="dropdown-menu"> 
    <li><a href="#">Meet Dr. James Applegate</a></li> 
    <li><a href="#">Blog</a></li> 
    <li><a href="#">Media</a></li> 

    </ul> 
    </li> 
    <li><a href="#" class="dropdown-toggle" data-toggle="dropdown">  Academic Affairs</a> 
     <ul class="dropdown-menu"> 
     <li><a href="#">IBHE Approval & Review</a></li> 
     <li><a href="#">Academic Degree Programs</a></li> 
     <li><a href="#">Colleges & Universities </a></li> 
      <li><a href="#">SARA</a></li> 

    <li class="divider"></li> 

    <li><a href="#">Enrollment & Degrees</a></li> 
     <li><a href="#">Transfer of Academic Credits</a></li> 
     <li><a href="#">P-20 Education Pipeline</a></li> 
     <li><a href="#">Underrepresented Groups</a></li> 
     <li><a href="#">Distance Education</a></li>

來源

2015-09-30 Araceli Ocon Moreno

任何〔實施例，我的意思是你所需要的視覺例子嗎？ –

也嘗試發佈完整的HTML，但只是一塊導航欄 –

嘗試發佈完整的代碼，但從它的外觀你有無序列表，如果你想添加一列，你應該考慮使用

http： //www.w3schools.com/html/html_tables.asp – Enkode

回答

我猜你正在使用的引導，這裏是我下面的建議更換會給你在菜單的下拉部分的幾個不同的列布局的一個例子。使用

.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; 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 
.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: #999; 
 
} 
 
@media (max-width: 767px) { 
 
    .dropdown-menu.multi-column { 
 
    min-width: 240px !important; 
 
    overflow-x: hidden; 
 
    } 
 
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<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-->

外部資源：

重要：

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css" rel="stylesheet" /> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

來源

2015-09-30 04:35:46

謝謝Rich我會盡快下班回家。 –

相關問題