导航栏在小屏幕中失去对齐

Question

我已经在我的网站上实现了twitter bootstrap。我想知道如何使twitter bootstrap official site上的导航栏响应如下。 在小尺寸屏幕中存在对齐问题，请看下面的图片。

HTML CODE：

<div class="navbar-wrapper">
      <div class="container">

        <div class="navbar navbar-inverse navbar-static-top" role="navigation">
          <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.php">Studyfoyer</a>
            </div>
            <div class="navbar-collapse collapse">
              <ul class="nav navbar-nav">
                <li class="active"><a href="learn.php">Learn</a></li>
                <li><a href="teach.php">Teach</a></li>
                <li><a href="forum.php">Discuss</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Connect<b class="caret"></b></a>
                  <ul class="dropdown-menu">

                    <li><a href="contact.php">Contact Us</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contribute</a></li>

                  </ul>
                </li>
              </ul>
            </div>
          </div>
        </div>

      </div>
    </div>

CUSTOM CSS：

.nav{
  float:right;
}
/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
}

/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper .container {
  padding-left: 0;
  padding-right: 0;
}
.navbar-wrapper .navbar {
  padding-left: 15px;
  padding-right: 15px;
}

仅供参考尺寸 my_Site

Answer 1

@media查询是您正在寻找的。你可以找到很多例子，一个是here