防止文本在 Bootstrap 3 响应式设计中换行

Question

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

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

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

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

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

Answer 1

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

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

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