导航栏按钮组未正确对齐

Navbar buttons group is not alighed correctly

我正在尝试构建一个 nav-bar,它将出现在 left-hand 一侧,而其余内容将出现在 right-hand 一侧。问题是 nav-bar 按钮组与 navbar-header 不在同一部分。我希望 nav-bar 按钮与 left-hand 一侧的 navbar-header 垂直对齐,但现在它们只是相互重叠。不仅如此,看起来按钮组在 navbar-header 和其余 HTML 内容之间 sitting/overlapping。

非常感谢所有可以帮助我解决此问题的帮助!谢谢!

    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-3 col-lg-2">
          <nav class="navbar navbar-default navbar-fixed-side">
            <div class="container">
              <div class="navbar-header">
                <a class="navbar-brand" href="./">Lessons</a>
              </div>
              <div class="btn-group-vertical navbar-btn">
                    <div class="btn-group navbar-btn">
                        <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
                          Lesson #1<span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                          <li>Lecture</li>
                          <li>Quiz</li>
                          <li>Exam</li>
                        </ul>
                        <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
                          Lesson #2<span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                          <li>Lecture</li>
                          <li>Quiz</li>
                          <li>Exam</li>
                        </ul>
                    </div>
              </div>
            </div>
          </nav>
        </div>
        <div class="col-sm-9 col-lg-10">
          <div id="lesson">
            <h2>Choose a lesson on the left panel to start your study module.</h2>
          </div>
        </div>
      </div>
    </div>

首先,您似乎缺少一个大纲 CSS。 我假设代码也不完整,因为我至少没有看到 "body" 标记。请注意,如果您确实有大纲 CSS,但没有包含它,那也可能是您的问题。

对齐方式,可以使用"margin(-*):[distance][unit];",或者"align="[居中、靠右、对齐等]"