Bootstrap中的單詞換行 - 一行或三行

-2

我使用Bootstrap 3，並且在我的頁面的某個位置，我有一個由三部分組成的「X Y Z」句子。例如，它可能是「芽斯賓塞與特倫斯山散步。」其中X =「芽斯賓塞」，Y =「走路」，Z =「特倫斯山」。Bootstrap中的單詞換行 - 一行或三行

我想避免在三個部分的文字環繞，所以我有以下的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做到這一點？

來源

2017-02-01 Giove

？ –

引導初步研究將告訴你如何解決這個問題http://getbootstrap.com/css/#grid –

我正在使用行和列，這只是一個句子（我編輯的問題，使其更清楚）。如果您建議將句子的不同部分放在不同的列中，請您解釋如何在不強制列具有相同寬度的情況下如何做到這一點？ – Giove

你應該使用的引導下實現這一目標： -

<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>

請你爲什麼不使用的行和列看看Bootstrap Grid

來源

2017-02-01 16:23:50

其實X，Y和Z是一個句子的一部分，我不希望它們以三列相等的寬度結束。我要編輯這個問題來說清楚。 – Giove

Bootstrap中的單詞換行 - 一行或三行

回答

相關問題