Css 如何在调整窗口大小时使导航栏列保持在同一行上？

我不想让导航栏上的任何东西掉到窗口的第二排，变得越来越小

我的导航栏当前包含：

品牌形象

搜索表

附加按钮

当前，无论我做什么，当窗口缩小时，导航栏最右侧的附加按钮将下降到第二行

如何防止导航栏最右侧的按钮在调整窗口大小时掉落到另一行

---

您可以使用使用两个属性的

行

类向

div

添加一个类：

1）

Display:flex

，将

div

转换为flex容器

2）

flex wrap:nowrap

，这将阻止它进行包装。。。从而使它保持在同一条线上

下面是实现该类的示例

CSS:

---

这实际上是代码的正确行为

问题在于

col sm xx

只为大于768px的屏幕大小创建列。在较小的屏幕上，元素堆叠（参考）

在小屏幕上显示列（<768px）

除了

col sm xx

之外，您还需要添加

col xs xx

，例如

<div class="row">
    <div class="col-sm-1 col-xs-2">
    [...]
    </div>

    <div class="col-sm-10  col-xs-8">
    [...]
    </div>

    <div class="col-sm-1 col-xs-2">
    [...]
     </div>
</div>

[...]
[...]
[...]

---

注意：xs列不必与大屏幕上的百分比相同，因此我建议在xs网格中为较小的列提供更多的空间（例如，将它们设置为2/12，而不是像我的示例中的1/12），因为它们需要更多的空间来容纳按钮。

您使用的是bootstrap 3还是4？@Zac我使用的是bootstrap3@AlwaysQuestioning,你找到解决方案了吗？@cwanjt我还没有被告知解决方案。对于任何可能遇到这个问题的人来说——没有必要添加额外的样式，唯一的错误是OP没有包括小屏幕的网格类，即

col-xs xx

（例如

col-xs-8

）。

<div class="row">
    <div class="col-sm-1 col-xs-2">
    [...]
    </div>

    <div class="col-sm-10  col-xs-8">
    [...]
    </div>

    <div class="col-sm-1 col-xs-2">
    [...]
     </div>
</div>