Question

所以我试图让我的下拉列表实际显示在导航栏下方，如图所示

这是我的html：`

<div class="container">


    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed"
                    data-toggle="collapse" data-target="#myNavbar">
                    <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 logo" href="#"></a>
            </div>

            <div class="collapse navbar-collapse navbar-right" id="myNavbar">
                <ul class="nav navbar-nav">
                    <li class="dropdown"><a href="#" class="dropdown-toggle"
                        data-toggle="dropdown" role="button" aria-expanded="false">blah
                            <!-- <span class="caret"></span> -->
                    </a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">blah1</a></li>
                            <li><a href="#">blah 2</a></li>
                            <li><a href="#">blah 3</a></li>
                        </ul></li>
                    <li><a href="#">blah</a></li>
                    <li class="dropdown"><a href="#" class="dropdown-toggle"
                        data-toggle="dropdown" role="button" aria-expanded="false">blah
                    </a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">blah</a></li>
                            <li><a href="#">blah &amp; blah</a></li>
                            <li><a href="#">blah</a></li>
                        </ul></li>
                    <li><a href="#"> blah</a></li>
                    <li><a href="#">blah</a></li>
                    <li><a href="#"><img src="../images/search.png"/></a></li>
                    <li><a href="#">Login</a></li>
                </ul>
            </div>
        </div>
    </nav>

</div>

这是我的css：

.icon--house, .modal button, article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block
}

.navbar-default {
background-color: #030303 !important;
border: #030303;
}

.nav > li > a {
 padding: 25px 20px;
 font-size: 16px;
 }

 /* bigger menu items in dropdown */
.dropdown-menu > li > a {
padding: 20px;
}

 /* removes whitespace in dropdown from navbar */
.dropdown-menu {
padding: 0;
float: right;
left: 50% !important;
right: auto !important;
text-align: center !important;
transform: translate(-50%, 0) !important;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

.dropdown-menu>li>a:hover {
color: #FFF;
background-color: #da1a32;
text-decoration: none;
}

.navbar .navbar-nav > li > a {
color: #FFF !important;
border-bottom: transparent solid 3px;
padding-bottom: 5px;
}

.navbar .navbar-nav > li > a:hover {
border-bottom: #da1a32 solid 3px;
}

a:link {
text-decoration: none;
color: #FFF !important;
}
a:visited {
text-decoration: none;
color: #FFF;
}
a:hover {
text-decoration: none;
color: #FFF;
}
a:active {
text-decoration: none;
color: #FFF;
}

.align-center, .missing {
text-align: center
}

body {
font-family: Montserrat, sans-serif;
font-weight: 300;
line-height: 1.4;
color: #202020;
overflow-x: hidden
}

img {
max-width: 100%;
height: auto
}

a {
transition: .3s ease;
text-decoration: none
}

h1 {
font-size: 30px;
line-height: 1.1;
margin-bottom: .5em
}

这就是我希望它显示为：

这就像重叠实际的导航栏一样：

我尝试了一些不同的事情，例如在标题的底部添加一个边距，但它没有帮助。如果有人能提供帮助，我将不胜感激，因为我不知道从哪里开始。如果你还能告诉我究竟是什么css需要改变那将是伟大的。感谢。

Answer 1

你只需要调整顶部＆＃39; .dropdown-menu类的值，它是绝对定位的。可能现在是100％

.dropdown-menu {
  top: 100%;
}

这将使它与li.dropdown＆gt;的底部对齐一个元素，因此，如果您从导航栏填充中获得20个额外的黑色背景，请尝试以下操作：

.dropdown-menu {
  top: calc(100% + 20px);
}

如何在bootstrap 3.3.7中的导航栏下添加下拉列表

1 个答案: