Question

长时间免费用户，第一次注册和发布，如果我错过了一些信息，请原谅我。

我目前正在使用twitter bootstrap框架来创建一个网站，但导航时遇到了相当大的麻烦。

我希望导航向右浮动，这样工作正常，但我似乎无法使文本垂直对齐。出于某种原因，切换按钮，移动设备视图何时也是有点错误，因为它不会推动其余内容，而是悬停在顶部。

除此之外，我希望移动设备视图具有左侧定义的菜单，而不是桌面版本的右侧浮动导航。

代码如下：

HTML：

<nav class="navbar navbar-default navbar-fixed-top" role="navigation" id="mhNavigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <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="index.html"><img src="img/logo.jpg" alt="MH Elite Logo" id="logo"></a>
            </div>

            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav" id="mhNavbar">
                    <li class="mhActive"><a href="#">HOME</a></li>
                    <li><a href="#fitnesscentre">FITNESS CENTRE</a></li>
                    <li><a href="#transformations">TRANSFORMATIONS</a></li>
                    <li><a href="#timetable">TIMETABLE</a></li>
                    <li><a href="#contact">CONTACT</a></li>
                </ul>
            </div><!--.nav-collapse -->
        </div>
    </nav>

CSS：

body {
  background-color: black;
}
.navbar-collapse.in,
.navbar-collapse.collapsing {
  border-top: none;
  box-shadow: none;
}
#mhNavigation {
  background-image: none;
  background-color: black !important;
  border-bottom: none;
  margin-bottom: 10px;
}
#mhNavigation #logo {
  width: 5em;
}
#mhNavigation #mhNavbar {
  float: right;
  padding: 0;
  margin: 0;
}
#mhNavigation #mhNavbar li {
  min-height: 5em;
}
#mhNavigation #mhNavbar li a {
  font-family: 'Anton', sans-serif;
  font-size: 1.2em;
  position: relative;
  top: 50%;
  color: white;
  text-shadow: none;
  padding-top: 0;
}
#mhNavigation #mhNavbar li a:hover {
  color: #ca090b;
}
#mhNavigation #mhNavbar .mhActive {
  background: none !important;
}
#mhNavigation #mhNavbar .mhActive a {
  color: #ca090b !important;
  text-shadow: none;
}

FIDDLE / BOOTPLY：

http://www.bootply.com/6eI3s3aHCg

Answer 1

所以我认为这一点主要是。 Bootstrap已经有一个navbar-right类，我可以将其应用于＆lt; ul＆gt;将内容浮动到桌面屏幕右侧的标记，但在移动设备上将其与左方向很好地叠加。

现在要弄清楚如何推动＆＃39;切换时的内容，但不太重要。

Bootstrap导航未垂直对齐，切换不会推动div

1 个答案: