导航栏按钮组未正确对齐
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="[居中、靠右、对齐等]"
我正在尝试构建一个 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="[居中、靠右、对齐等]"