Question

我想在学术事务中增加一个专栏，所以我可以有两组相互相邻的四个链接但我在每次尝试时都失败了。任何帮助将不胜感激。

</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>

Answer 1

我猜你正在使用bootstrap，我在下面的建议中将给出一个菜单下拉部分中几个不同列布局的示例。

.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" />

将列添加到Navbar下拉列表

1 个答案: