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

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添加到总列而不是更多。不确定如何设置引导程序，但它是导致您看到的包装/换行的边距。

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

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