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

时间:2018-01-05 00:51:39

标签: html css twitter-bootstrap responsive-design bootstrap-4

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

nav header sketch

我希望它在缩小浏览器大小时能够快速响应。我在导航栏中的三列中使用了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>

1 个答案:

答案 0 :(得分:0)

设置填充而不是边距以使它们间隔开,并将所有col添加到总列而不是更多。不确定如何设置引导程序,但它是导致您看到的包装/换行的边距。

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

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