html - 导航栏右侧的折叠按钮在左侧显示链接

Question

第一篇关于 SO 的文章很抱歉，如果我的格式很糟糕。只是一个关于我正在处理的自定义固定顶部导航栏的快速问题(一般来说，我对 Bootstrap 和 CSS 非常陌生)。它有一个品牌标志，右边有三个链接，其中一个是下拉菜单，还有一个媒体查询，要求链接更快崩溃(我在 SO 上找到了!)。但是，当窗口重新调整大小时，并单击折叠按钮时，所有链接都会下拉到完整的左侧，就像它来自品牌下一样。我只想要一个简单的 Accordion 式下拉菜单来折叠和实际下拉菜单。非常感谢任何输入! 这是 HTML:

<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"  data-target="#topFixedNavbar1"  aria-expanded="false"><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="#"><img src="images/logo.jpg" alt="Top Tier Math"></a></div>
  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="topFixedNavbar1">



    <ul class="nav navbar-nav navbar-right links">
      <li><a href="#">How We Work</a></li>
      <li><a href="#">Abous Us</a></li>

      <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown<span class="caret"></span></a>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </li>
    </ul>
  </div>

我还添加了一些 css 来更改 Logo 导航栏的高度，但我怀疑这是原因。不过就在这里。

.navbar-default{
height:120px;
}
.navbar-header, .navbar-brand{
height:120px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;   
}

#topFixedNavbar1{
height:120px;
}

.links{
height:120px;

}

.navbar-nav li a{
line-height:90px;


}

.dropdown li a{
line-height:30px;
}
@media (max-width: 991px) {
.navbar-header {
    float: none;
}
.navbar-toggle {
    display: block;
}
.navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
    display: none!important;
}
.navbar-nav {
    float: none!important;
    margin: 7.5px -15px;
}
.navbar-nav>li {
    float: none;
}
.navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
}
.navbar-text {
    float: none;
    margin: 15px 0;
}
/* since 3.1.0 */
.navbar-collapse.collapse.in { 
    display: block!important;
}
.collapsing {
    overflow: hidden!important;
}

Answer 1

我不确定您希望它们如何显示，但只需使用 CSS 来控制下拉列表的位置。

.collapse.navbar-collapse {
  width:
  margin:
}

您应该能够为此添加样式，它会移动并更改下拉列表。