空格導航條均勻填充

我有一個使用下拉鍊接的引導程序導航欄。目前，它看起來如下：空格導航條均勻填充

綠色的部分是實際的導航欄和灰色的部分是當你點擊任何鏈接，你得到的下拉列表。

我想空間了我的導航欄中的鏈接，使它們均勻地在左，右一些填充間隔，有點像這樣：

現在這裏是如何我的代碼的結構：

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

我怎樣才能做到這一點沒有違反任何下拉功能，這我已經實現的？

來源

2017-06-19 FlameDra

我已經爲您添加了一些修改代碼。希望這會對你有用。

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

來源

2017-06-19 16:25:32

您的修改將菜單項均勻隔開。不過，我想也許可以設置導航欄鏈接的左側和右側有100像素的空間，然後中間的所有內容都是均勻隔開的導航欄鏈接。這有可能嗎？ – FlameDra

是的，可以通過調整'ul'元素和'navbar'項目的樣式來實現。 –

是否嚮導航欄添加邊距或填充，還是將它們添加到ul？任何示例？ – FlameDra

空格導航條均勻填充

回答

相關問題