避免文本在 Bootstrap 3 响应式设计中换行

Question

我有一个查看器，其控制栏由连续的 div 组成。其他项目的文本上已经有 FA 图标，因此屏幕尺寸没有问题，但为了区分两个具有更高级别控制的按钮以切换查看器中的内容。它们的布局如下所示：

<i class="fa fa-toggle-right lg"></i> <span style="font-size:18px;">Next

当它像 iPhone 一样显示在小屏幕上时，图标会移动到文本上方，我希望它留在文本旁边。原因是另一个按钮然后与它下面的图标对齐，这看起来很糟糕UI。

Previous<i class="fa fa-toggle-left lg"></i>

关于如何防止它们包装的任何选项？

Answer 1

用 <span class="text-nowrap"> 包围它。 class .text-nowrap 是 Bootstrap's text alignment 帮助程序 class 之一，包括：

.text-nowrap {
    white-space: nowrap;
}

这使得图标和文本保持在同一行。