Question

我有一个使用下拉链接的bootstrap导航栏。目前看起来如下：

绿色部分是实际的导航栏，灰色部分是您点击任何链接时获得的下拉列表。

我想将导航栏中的链接分开，以便它们在左右两侧均匀分布，有点像这样：

现在我的代码是如何构建的：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
.navbar {
    background-color: #007953;
    font-family: Arial;
    text-transform: uppercase;
}

.nav.navbar-nav li a {
   color: white;
 }
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    background-color: #007953;
    color: white;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
    color: white;
    background-color: #007953;
}

.nav > li.dropdown.open {
    position: static;
}
.nav > li.dropdown.open .dropdown-menu {
    display:table; width: 100%; text-align: center; left:0; right:0;
}
.dropdown-menu>li {
    display: table-cell;
}

.dropdown-menu {
  min-width: 200px;
  background-color: #49565A;
}
.dropdown-menu.columns-2 {
  min-width: 400px;
  background-color: #49565A;
}
/* background-color here controls background of sub menu*/
.dropdown-menu.columns-3 {
  min-width: 600px;
  background-color: #49565A;
  font-family: Arial;
  text-transform: capitalize;

}
.dropdown-menu li a {
  padding: 5px 15px;
  font-weight: 300;
  text-align: left;
}

/* color tag here controls color of sub menu item's text*/
.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: yellow;
}

.caret {
  color: #9CCB3B;
}

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

<body>
 <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>
    </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">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 class="divider"></li>
                      <li><a href="#">Another action</a></li>
                      <li class="divider"></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 class="divider"></li>
                      <li><a href="#">Another action</a></li>
                      <li class="divider"></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 class="divider"></li>
                      <li><a href="#">Another action</a></li>
                      <li class="divider"></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 class="divider"></li>
                      <li><a href="#">Another action</a></li>
                      <li class="divider"></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 class="divider"></li>
                      <li><a href="#">Another action</a></li>
                      <li class="divider"></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 class="divider"></li>
                      <li><a href="#">Another action</a></li>
                      <li class="divider"></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 class="divider"></li>
                      <li><a href="#">Another action</a></li>
                      <li class="divider"></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 class="divider"></li>
                      <li><a href="#">Another action</a></li>
                      <li class="divider"></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 class="divider"></li>
                      <li><a href="#">Another action</a></li>
                      <li class="divider"></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>
        </ul>
    </div>
    <!--/.navbar-collapse-->
</nav>
<!--/.navbar-->


 <script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

如何在不破坏我实施的任何下拉功能的情况下实现这一目标？

Answer 1

我已为您的代码添加了一些修改。希望这对你有用。

   <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <style>
    .navbar {
        background-color: #007953;
        font-family: Arial;
        text-transform: uppercase;
    }
      .dropdown{
        margin-right:140px;
        margin-left:22px;
      }
    .nav.navbar-nav li a {
       color: white;
     }
      ..nav .navbar-nav{
        width:900px !important;
      }
      .nav .navbar-nav .dropdown{
          margin-right:200px;
      }
    .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
        background-color: #007953;
        color: white;
    }
    .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
        color: white;
        background-color: #007953;
    }
    .nav > li.dropdown.open {
        position: static;
    }
    .nav > li.dropdown.open .dropdown-menu {
        display:table; width: 100%; text-align: center; left:0; right:0;
    }
    .dropdown-menu>li {
        display: table-cell;
    }

    .dropdown-menu {
      min-width: 200px;
      background-color: #49565A;
    }
    .dropdown-menu.columns-2 {
      min-width: 400px;
      background-color: #49565A;
    }
    /* background-color here controls background of sub menu*/
    .dropdown-menu.columns-3 {
      min-width: 600px;
      background-color: #49565A;
      font-family: Arial;
      text-transform: capitalize;

    }
    .dropdown-menu li a {
      padding: 5px 15px;
      font-weight: 300;
      text-align: left;
    }

    /* color tag here controls color of sub menu item's text*/
    .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: yellow;
    }

    .caret {
      color: #9CCB3B;
    }

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

    <body>
     <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>
        </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">Three Column <b class="caret" ></b></a>
                  <ul class="dropdown-menu multi-column columns-3">
                    <div class="row">
                      <div class="col-sm-2">
                        <ul class="multi-column-dropdown">
                          <li><a href="#">Action</a></li>
                          <li class="divider"></li>
                          <li><a href="#">Another action</a></li>
                          <li class="divider"></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-2">
                        <ul class="multi-column-dropdown">
                          <li><a href="#">Action</a></li>
                          <li class="divider"></li>
                          <li><a href="#">Another action</a></li>
                          <li class="divider"></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-2">
                        <ul class="multi-column-dropdown">
                          <li><a href="#">Action</a></li>
                          <li class="divider"></li>
                          <li><a href="#">Another action</a></li>
                          <li class="divider"></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 class="divider"></li>
                          <li><a href="#">Another action</a></li>
                          <li class="divider"></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 class="divider"></li>
                          <li><a href="#">Another action</a></li>
                          <li class="divider"></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 class="divider"></li>
                          <li><a href="#">Another action</a></li>
                          <li class="divider"></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 class="divider"></li>
                          <li><a href="#">Another action</a></li>
                          <li class="divider"></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 class="divider"></li>
                          <li><a href="#">Another action</a></li>
                          <li class="divider"></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 class="divider"></li>
                          <li><a href="#">Another action</a></li>
                          <li class="divider"></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>
            </ul>
        </div>
        <!--/.navbar-collapse-->
    </nav>
    <!--/.navbar-->


     <script
      src="https://code.jquery.com/jquery-3.2.1.min.js"
      integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
      crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    </body>
    </html>

空间导航栏使用填充

1 个答案: