保持文本不被包裹在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">围绕它。类.text-nowrap是Bootstrap's text alignment帮助程序类之一，包含：

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

使图标和文字保持在同一行。