Html 导航栏右侧的折叠按钮显示左侧的链接

如果我的格式很糟糕，那么很抱歉第一篇文章。只是一个关于我正在开发的自定义固定顶部导航栏的快速问题（我对引导和CSS一般来说都是新手）。它有一个商标作为品牌，右边有三个链接，其中一个是下拉列表，还有一个媒体查询链接是否会更快崩溃（我在这里找到了！）。然而，当窗口被重新调整大小，并点击折叠按钮时，所有链接都会从完整的左侧下拉下来，就像它来自品牌下一样。我只想要一个简单的手风琴风格的下拉列表，用于折叠和实际的下拉列表。非常感谢您的任何意见！ 以下是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控制下拉列表的位置即可

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

---

您应该能够向该页面添加样式，它将移动并更改下拉列表。

您可以为我们提供完整的CSS文件吗？这是我在页面中使用的所有CSS。我在一个测试页面上专门为菜单做这个。除了4000多行引导代码之外。我在折叠代码中遗漏了一些html。我会相应地编辑这篇文章。我补充说，它确实改变了折叠区域中链接的宽度和边距，但是它们仍然完全位于左侧，我希望它们只是从右侧的折叠按钮下面弹出（就像你认为它会自动做的那样）我不认为我可以发布一张图片，但我有一个看起来像编辑的片段：在这里添加了一个片段：哇，我不知道为什么我没有将宽度设置为100%来开始并更改颜色等等。太棒了，非常感谢！

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