引导中的自动换行 - 一行或三行

Question

>我正在使用 Bootstrap 3，在我的页面中的某个地方，我有一个由三个部分组成的句子"X Y Z"。例如，它可以是"Bud Spencer与Terence Hill一起散步"，其中X="Bud Spencer"，Y="Walks with"，Z="Terence Hill"。

我想避免三个部分中的每一个部分的文本换行，所以我有以下 HTML 代码：

<div class="...">
    <span class="text-nowrap">X</span> <span class="text-nowrap">Y</span> <span class="text-nowrap">Z</span>
</div>

理想情况下，我希望用户看到不间断的句子X Y Z，但如果屏幕不够宽，我希望他们看到

X
Y
Z

而不是，例如

X Y
Z

换句话说，我想强制包装所有三个部分，以防没有足够的空间让它们保持在同一条线上。如何使用 CSS/Bootstrap 做到这一点？

Answer 1

您应该在引导程序中使用以下方法来实现这一目标：-

<div class="row">
    <span class="col-md-12 col-lg-4">X</span>
    <span class="col-md-12 col-lg-4">Y</span>
    <span class="col-md-12 col-lg-4">Z</span>
</div>

请查看引导网格