0
私はドロップダウンリンクを利用するブートストラップnavbarを持っています。次のように現在に見える：Space Navbarはパッドを使って均等にリンクします
緑色の部分は、実際のナビゲーションバーで、グレーの部分は、あなたが任意のリンクをクリックしたときに取得ドロップダウンです。それらは均等な種類のこのような左右のいくつかのパディングと間隔を置いて配置されるように
私は私のナビゲーションバー内のリンクアウトスペースたい：
を今ここにどのように私のコードは、構造化されています。
<!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>
どのように私は私が実装した機能を、ドロップダウンのいずれかを壊すことなく、これを達成することができますか？
メニュー項目の間隔を均等にします。しかし、ナビゲーションバーのリンクの左右に100pxのスペースがあり、中央のすべてが均等に間隔を置かれたナビゲーションバーのリンクであると設定できると考えました。どういうわけか可能ですか？ – FlameDra
はい、 'ul'要素と' navbar'項目のスタイルを調整することで可能になります。 –
ナビゲーションバーに余白やパディングを追加するのですか、それともulに追加しますか？ 例はありますか？ – FlameDra