将导航栏划分为 Bootstrap 的列

Question

问题：

我想让 Bootstrap 4 Beta 中导航栏的两个部分大小完全相同，其余部分位于中心。

• 第 1 列包含品牌。
• 第 2 列包含链接和内容 应该是中心。
• 第 3 列包含一个搜索字段。

第 1 列和第 3 列的大小应完全相同。

由于内容没有相应调整，似乎无法在导航栏中使用列？

所以我想出了一个不同的解决方案，但第 1 列和第 3 列的大小不同。如何确保第 1 列和第 3 列始终相同？有没有不涉及自定义 css 的方法？

HTML 代码：

<!-- Navigation -->
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
  <a href="#" class="navbar-brand">Logo</a>
  <ul class="navbar-nav mx-auto">
    <li class="nav-item"><a href="#" class="nav-link">Link 1</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Link 2</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Link 3</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Link 4</a></li>
  </ul>
  <form class="form-inline">
    <input type="text" class="form-control" placeholder="Search">
  </form>
</nav>

最小工作示例 (MWE)：

https://jsfiddle.net/6gc4guw7/

Answer 1

添加cdn后
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js
根据以下课程的要求添加 col-xs-4 或 col-sm-4 或 col-md-4 或 col-lg-4。

 <!-- Navigation -->
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
  <a href="#" class="col-xs-4 navbar-brand">Logo</a>
  <ul class=" col-xs-4 navbar-nav mx-auto">
    <li class="nav-item"><a href="#" class="nav-link">Link 1</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Link 2</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Link 3</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Link 4</a></li>
  </ul>
  <form class="form-inline">
    <input type="text" class="col-xs-4 form-control" placeholder="Search">
  </form>
</nav>