Question

我正在为自己创建一个网站，我在使用引导网格时遇到问题，使菜单在移动屏幕上响应。

我设法编写了菜单的响应式设计。但是，当重新缩放时，菜单项似乎存在问题。他们只是不会在菜单下对齐。（我希望他们可以将它们悬停在下面的图像上，而不是将其全部向下推。）

移动屏幕图片：Menu items not aligned with collapsed menu.

提前感谢所有帮助。如果我违反任何规则，请指出正确的方向。

亲切的问候，汤姆

/* Lay-out: Header*/

.header-row {
  display: flex;
  align-items: center;
}
.nav-no-mar-pad {
  margin: 0;
  padding: 0;
}
.navbar-toggle {
  border: #022F40 solid 1px;
  margin: 8px 4px 8px 45px;
  text-align: right;
}
.icon-bar {
  border: #022F40 solid 1px;
}
.navbar-nav li a {
  margin-right: 0;
  text-align: center;
  width: 90px;
  padding: 10px 10px;
}
/* --- End --- */

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<div class="header">

  <div class="container-fluid background-white">
    <div class="row  header-row">

      <div class="col-lg-5">
        <img id="header-logo" class="img-responsive" src="http://placehold.it/325x75">
      </div>

      <div class="col-xs-6 col-md-offset-1" style="padding-right: 0">
        <nav class="navbar navbar-right nav-no-mar-pad">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
          </div>
          <div id="navbar" id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
              <li><a href="#">About me</a>
              </li>
              <li><a href="#">Contact</a>
              </li>
            </ul>
          </div>
        </nav>
      </div>

    </div>
  </div>

</div>

Answer 1

由于您不介意菜单浮动在页面上的其他元素上，因此实现此目的的一个简单方法是使用绝对定位。您可以轻松地将元素推到屏幕的右侧，并使用此方法将它们对齐。添加如下内容：

@media only screen and (max-width: 768px) {
    #navbar {
        position:absolute;
        right:0;
    }
    .navbar.navbar-right.nav-no-mar-pad {
        position:absolute;
        right: 0;
    }
    .header-row {
        align-items:inherit;
    }
}

这应该为您提供所需的样式，并且只在较小的屏幕尺寸上给您。如果你想看到我在这里有一个工作版本：

http://codepen.io/egerrard/pen/xEYOzy

响应式菜单右对齐Bootstrap

1 个答案: