Question

当我调整窗口大小时，我的导航栏出现问题

problem http://img15.hostingpics.net/pics/76755571az.jpg

它应该像这样对齐：
problem http://img15.hostingpics.net/pics/125996aze.jpg 我想我错过了我的CSS中的某些内容......有人可以帮我解决一下吗？

代码演示：
http://codepen.io/KyleCprt/pen/JXBqEo

HTML：

<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  <script type="text/javascript" src="{{ app.request.basepath }}/lib/jQuery/jquery.min.js"></script>
  <script type="text/javascript" src="{{ app.request.basepath }}/lib/bootstrap/js/bootstrap.min.js"></script>
  <title>GoldenTicket</title>
</head>

<body>
  <div class="containerGT">
    <nav class="navbar navbar-default navbar-fixed-top navbar-default" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarGT">
              <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="#"><img src="http://res.cloudinary.com/candidbusiness/image/upload/v1455406304/dispute-bills-chicago.png">
          </a>
        </div>
        <div class="navbar-collapse collapse" id="navbarGT">
          <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Event Categories <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
              </ul>
            </li>
            <li><a href="{{ path('panier') }}"><span class="glyphicon glyphicon-shopping-cart"></span> Your basket</a></li>
            <li class="{% if adminMenu is defined %}active{% endif %}"><a href="{{ path('admin') }}"><span class="glyphicon glyphicon-cog"></span> Administration</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <span class="glyphicon glyphicon-user"></span> Welcome, John <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="{{ path('logout') }}">Log out</a></li>
                <li><a href="{{ path('user_edit') }}">My account</a></li>
              </ul>
            </li>

          </ul>
        </div>
        <!--/.nav-collapse -->
      </div>
      <!--/.container-fluid -->
    </nav>
    <div id="content">Lorem ipsum dolor sit amet</div>
<footer class="footer">
  <a href="#">GoldenTicket</a> is a school project
</footer>

CSS：

body {
    padding-top: 100px;
}

.footer {
    border-top: 1px solid #ccc;
    padding-top: 10px;
    text-align: center;
}

.eventTitle:hover, .eventTitle:focus {
    text-decoration: none;
}

.adminTable {
    margin-top: 20px;
    margin-bottom: 20px;
}

#errorPanel {
    padding-top: 30px;
    padding-bottom: 10px;
}


.navbar-brand {
  padding: 0px;
}
.navbar-brand>img {
  height: 100%;
  padding: 15px;
  width: auto;
}

.containerGT .navbar-brand {
  height: 80px;
}

.containerGT .nav >li >a {
  padding-top: 30px;
  padding-bottom: 30px;
}
.containerGT .navbar-toggle {
  padding: 10px;
  margin: 25px 15px 25px 0;
}

#content{
  margin-left: 2%;
  margin-right: 2%;
}


/* CSS Transform Align Navbar Brand Text ... This could also be achieved with table / table-cells */
.navbar-alignit .navbar-header {
      -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  height: 50px;
}
.navbar-alignit .navbar-brand {
    top: 50%;
    display: block;
    position: relative;
    height: auto;
    transform: translate(0,-50%);
    margin-right: 15px;
  margin-left: 15px;
}

.navbar-nav>li>.dropdown-menu {
    z-index: 9999;
}

.indexJumb{
  padding-top: 20px;
  padding-bottom: 20px;
}

.containerIndex{
  margin-left: 0;
}

.coverImgIndex{
  width:100%;
}

Answer 1

编辑（删除所有以前的冗余文字）

问题出在这个元素中：

<nav class="navbar navbar-default navbar-fixed-top navbar-default" role="navigation">

您有一个容器，但该容器内没有行和列。这是利润率恕我直言的问题。 Bootstrap喜欢它的结构，所以你应该遵守它。它有填充（容器） - 边距（行） - 填充（列）层次结构，所以如果你错过了一个并且有问题。

如果你想了解更多关于它如何在bootstrap中工作的内容，请阅读这篇文章http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works，这对我有很大帮助。

所以你有两个选择：

一起摆脱容器（并且效果很好）
保留容器并在其中添加行和列。因此，行可以在容器div之后，一列可以是徽标，另一列是我猜的实际菜单。

<强>解决方案：

<nav class="navbar navbar-default navbar-fixed-top navbar-default" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarGT">
....

希望这会有所帮助：）

Answer 2

您是否尝试过不同的媒体查询尺寸的导航链接字体大小和事件标题/徽标的值？

在较小的设备上观看时，使用较小的字体和较小的图像可能会使它们完美地融合在一起。

Answer 3

看起来你的导航在768ox-991px之间断开。

Bootstrap下拉菜单在您到达col-sm-breakpoint（768px）之前不会激活，因此需要添加自定义媒体查询并将您的下拉导航目标定位在col-med（991px）断点处激活。 / p>

Bootstrap：响应导航栏故障

3 个答案: