javascript - 在 Bootstrap 导航栏中分离菜单项并将它们居中

Question

我想使用导航栏创建类似菜单的按钮。我想这样做是因为它是适用于小型设备的可折叠界面。

我写了这个 HTML 标记:

<div class="container">
    <nav class="navbar" style="background-color: transparent;">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar" style="background-color: black;">
                    <span class="icon-bar" style="background-color: white;"></span>
                    <span class="icon-bar" style="background-color: white;"></span>
                    <span class="icon-bar" style="background-color: white;"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Page 1</a></li>
                    <li><a href="#">Page 2</a></li>
                    <li><a href="#">Page 3</a></li>
                    <li><a href="#">Page 4</a></li>
                </ul>
            </div>
        </div>
    </nav>
</div>

还有这个样式:

nav ul {
        width: 100%;
        text-align:center;
    }

        nav ul li {
            text-align: center;
            width: 17%;
            background-color: #dbd9d9;
            margin: 10px;
        }

但是有一些问题:

1. 此菜单项不在 ul 的中心。我如何将所有 li 置于 ul 中心？

2. 如果我将窗口调整为某个宽度，此菜单会分成 2 行。我如何解决这个问题，即我的菜单是 md 和 lg 大小的 1 行？

Demo

谢谢

Answer 1

使用 white-space: no-wrap 将停止在 ul

中换行

Bootstrap 将 float: left 放在我们需要覆盖的 nav.li 元素上

将你的CSS改成这样:

nav ul {
  width: 100%;
  text-align: center;
  white-space:nowrap /* <-- changed */
}

nav ul li {
  text-align: center;
  width: 17%;
  background-color: #dbd9d9;
  /*padding: 10px;*/
  margin: 10px;
  display: inline-block !important; /* <-- changed */
  float: none !important; /* <-- changed */
}

必须使用 !important 来覆盖 Bootstrap

Updated bootply