I have a viewer with a control bar consisting of divs in a row. The other items have the FA icon already over the text for it so there is no issue with screen size but in order to differentiate two of the buttons that have higher level control to switch the content in the viewer. They are laid out as shown below:
我有一个带有控制栏的查看器，其中包含连续的div。其他项目已经在文本上方有FA图标，因此屏幕尺寸没有问题，但为了区分具有更高级别控制的两个按钮来切换查看器中的内容。它们的布局如下图所示：
<i class="fa fa-toggle-right lg"></i> <span style="font-size:18px;">Next
When this is shown on a small screen like an iPhone, the icon moves over the text and I'd like it to stay next to it instead. The reason being that the other button then lines up with the icon below it which is bad looking UI.
当这个显示在像iPhone这样的小屏幕上时，图标会在文本上移动，我希望它能够留在它旁边。原因是另一个按钮然后与它下面的图标对齐，这是看起来很糟糕的UI。
Previous<i class="fa fa-toggle-left lg"></i>
Any options as to how to keep them from wrapping?
有关如何防止它们包装的任何选项？
1 个解决方案
#1
100
Surround it with a <span class="text-nowrap">. The class .text-nowrap is one of Bootstrap's text alignment helper classes and consists of:
用包围它。类.text-nowrap是Bootstrap的文本对齐辅助类之一，包括：
.text-nowrap {
white-space: nowrap;
}
which makes the icon and text stay on the same line.
这使得图标和文字保持在同一条线上。
#1
100
Surround it with a <span class="text-nowrap">. The class .text-nowrap is one of Bootstrap's text alignment helper classes and consists of:
用包围它。类.text-nowrap是Bootstrap的文本对齐辅助类之一，包括：
.text-nowrap {
white-space: nowrap;
}
which makes the icon and text stay on the same line.
这使得图标和文字保持在同一条线上。