Question

当我点击navbar-collapse按钮时，navbar中的元素会展开，但它们不会垂直对齐。如何在Link5上保持Link6和navbar右对齐，从而如何做到这一点？

这里是JSFiddle：http://jsfiddle.net/sushiknives/yvgr92c3/1/

编辑：nav-pills似乎是个问题。如果我用navbar-nav替换它，它会自动垂直堆叠。在这种情况下有没有办法重新创建nav-pills效果？

Answer 1

您可以使用flexbox属性flex-direction : column将其叠加垂直希望这会对您有所帮助

＆＃13;

body {
  width: 100% margin: auto;
  background-color: #f7f7f7;
}
.navbar {
  background: #FFFFFF
}
.nav {
  width: 100%
}
.nav a {
  font-family: 'Raleway', sans-serif;
  color: #5a5a5a;
  font-size: 13px;
  font-weight: bold;
  text-transform: uppercase;
}
ul {
  display: flex;
  flex-direction: column;
}
.nav li {
  display: inline;
}
.content {
  margin-top: 100px;
}

＆＃13;

<title>Navabar Test</title>
<link href='http://fonts.googleapis.com/css?family=Raleway:400,100' rel='stylesheet' type='text/css'>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="texthover_test.css">

<body>
  <div class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example">	<span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>

        </button>
      </div>
      <div class="collapse navbar-collapse" id="example">
        <ul class="nav nav-pills">
          <li><a href="#">Link1</a>

          </li>
          <li><a href="#">Link2</a>

          </li>
          <li><a href="#">Link3</a>

          </li>
          <li><a href="#">Link4</a>

          </li>
          <li class="pull-right"><a href="#">Link5</a>

          </li>
          <li class="pull-right"><a href="#">Link6</a>

          </li>
        </ul>
      </div>
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>

</html>

＆＃13;

Answer 2

希望我理解你的问题。 li必须是父元素的全宽，或者您可以缩短ul本身的宽度并使li与ul的宽度相同。根据需要进行调整。

 .nav li{
            display: block;
            width: 100%;
        }

See it stacked as you want

如何在折叠展开时垂直堆叠导航栏元素

2 个答案: