Question

我试图设计一个响应式页面。

这是在广泛的浏览器中的样子。

它改为ff。当我缩小时：

我想要发生的是：

这是我的代码：

＆＃13;

/**For Eample Only So the Icons are Visible*/

.navbar-ct-blue {
  background: #1B96BF;
}

＆＃13;

<link href="https://cdn.bootcss.com/pixeden-stroke-7-icon/1.2.3/dist/pe-icon-7-stroke.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-ct-blue navbar-fixed-bottom" role="navigation">
  <div class="container">
    <ul class="nav nav-justified">
      <li class="navbar-nav">
        <a href="#">
          <i class="pe-7s-piggy" style="color: white;"></i>
        </a>
      </li>
      <li class="navbar-nav">
        <a href="#">
          <i class="pe-7s-cash" style="color: white;"></i>
        </a>
      </li>
      <li class="navbar-nav">
        <a href="#">
          <i class="pe-7s-wallet" style="color: white;"></i>
        </a>
      </li>
    </ul>
  </div>
  <!-- /.container-fluid -->
</nav>

＆＃13;

我看过这些链接，但我找不到答案。请帮忙。

How to prevent Bootstrap navbar from displaying in multiple lines without collapsing them into an icon

How to prevent a bootstrap navbar from collapsing when window resizing

Centering navbar buttons in bootstrap

Answer 1

您发现这种情况发生了，因为nav-justified课程仅使用display:table-cell以上768px：

@media (min-width:768px) {
 .nav-justified > li {
   display: table-cell;
   width: 1%
}

以下两个例子解决了这个问题：

使用nav-justified：

＆＃13;

.navbar.navbar-ct-blue {
  background: #1B96BF;
  border: 1px solid #1B96BF;
  max-height: 50px;
  line-height: 30px;
  margin: 0;
}
.navbar.navbar-ct-blue .nav-justified > li {
  display: table-cell;
  width: 1%
}
.navbar.navbar-ct-blue .nav-justified > li > a {
  color: white;
  font-size: 30px;
}
.navbar.navbar-ct-blue .nav-justified > li > a:hover {
  color: #00F2FF;
  background: none;
}

＆＃13;

<link href="https://cdn.bootcss.com/pixeden-stroke-7-icon/1.2.3/dist/pe-icon-7-stroke.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-ct-blue navbar-fixed-bottom" role="navigation">

  <div class="container">
    <ul class="nav nav-justified">
      <li>
        <a href="#">
          <span class="pe-7s-piggy"></span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="pe-7s-cash"></span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="pe-7s-wallet"></span>
        </a>
      </li>
    </ul>
  </div>

</nav>

＆＃13;

使用网格：

＆＃13;

.navbar.navbar-ct-blue {
  background: #1B96BF;
  border: 1px solid #1B96BF;
  margin: 0;
}
.navbar.navbar-ct-blue .nav-row span {
  color: white;
  padding: 20px 0;
  font-size: 30px;
}
.navbar.navbar-ct-blue .nav-row span:hover {
  color: #00F2FF;
}

＆＃13;

<link href="https://cdn.bootcss.com/pixeden-stroke-7-icon/1.2.3/dist/pe-icon-7-stroke.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-fixed-bottom navbar-ct-blue" role="navigation">

  <div class="container">
    <div class="row nav-row text-center">
      <div class="col-xs-4">
        <a href="#"><span class="pe-7s-piggy"></span></a>
      </div>
      <div class="col-xs-4">
        <a href="#"><span class="pe-7s-cash"></span></a>
      </div>
      <div class="col-xs-4">
        <a href="#"><span class="pe-7s-wallet"></span></a>
      </div>
    </div>
  </div>

</nav>

＆＃13;

Answer 2

给<li class="navbar-nav">显然是错误的。删除它可能会修复它。此外，正如Tasos所说，列表项inline-block应该这样做。当然，请查看相应的媒体查询。

如何防止引导导航栏按钮堆叠

2 个答案: