css - 在 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 之一辅助类，包括:

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

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