CSS 防止文本在 Bootstrap 3 响应式设计中换行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27986391/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Keep Text From Wrapping in Bootstrap 3 Responsive Design
提问by kylebellamy
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 这样的小屏幕上时，图标会移动到文本上，我希望它留在它旁边。原因是另一个按钮然后与它下面的图标对齐，这看起来很糟糕。
Previous<i class="fa fa-toggle-left lg"></i>
Any options as to how to keep them from wrapping?
关于如何防止它们包装的任何选项？
回答by ckuijjer
Surround it with a <span class="text-nowrap">. The class .text-nowrapis one of Bootstrap's text alignmenthelper classes and consists of:
用一个<span class="text-nowrap">. 该类.text-nowrap是Bootstrap 的文本对齐辅助类之一，包括：
.text-nowrap {
white-space: nowrap;
}
which makes the icon and text stay on the same line.
这使得图标和文本保持在同一行。
