调整浏览器大小时，导航链接会中断到新行

Question

我正在使用Bootstrap 4为我的网站创建导航标题。它安排如下：

当我缩小浏览器大小时，我希望它能够响应。我在导航栏中的三列中使用了col-4。

但是，一旦达到一定的大小，第3个（最后一个）链接就会掉到一个新行上。

我将每个元素集中在各自的col-4 div中，并且我为前两个链接设置了margin: 15%。缩小视口时，如何将所有三个链接保持在同一行？

这是页面的HTML：

<div class="container-fluid">

    <nav class="navbar">
        <div class="col-3 offset-1">
            <form style="width: 90%">
          <input class="form-control" type="text" placeholder="Search for someone..." aria-label="Search">
         </form>
        </div>

        <div class="col-4">
            <img class="mx-auto" src="logo.png">
        </div>

        <div class="col-4 nav-links">
                <a href="#" id="my-feed">MY FEED</a>
                <a href="#" id="hot">HOT</a>
                <a id="last-nav-link" href="#">MY PROFILE</a>
        </div>
    </nav>

  </div>

Answer 1

设置填充而不是边距来区分它们，并将所有col添加到总列而不是更多。不确定如何设置bootstrap，但它是导致你看到的包装/换行的边距。

如果总列宽为12且您有4列，则它们在加起来时必须等于12。

正如雅各布所说，发布你的导航HTML。没有看到HTML我们只能猜测。