2015-10-29 29 views
1

我經常想知道是否可以使用Bootstrap構建一個響應性文章,而不用分割內容。Bootstrap artcile風格

例如在一開始似乎很簡單: enter image description here

基本上將它與4列(假設COL-LG-3)一行。

你將不得不把你的文本分成4部分。合法...但我不能要求我的用戶分開他們的文本。

有沒有一個好的圖書館在這裏做到這一點?

我試圖寫一個角度模塊,但我不滿意的結果,因爲我計算了我有多少單詞,並根據屏幕大小將它除以4,3,2,1。

問題是有些單詞比其他單詞長,而我最後列的單詞比其他單詞長。如果你有任何想法,我會很高興聽到!

編輯:我做了一個角指令建立在幾秒鐘內響應母校的文章:GithubPlunkr

<multiple-columns col-xs="1" col-sm="2" col-md="3" col-lg="4" justify="true" text="Lorem ipsum ..."> </multiple-columns>

+0

我不知道這樣的庫(但它確實存在的話) - 但爲什麼你不計數的字符,而不是計算的話,並在最近的空間分割字符串? – messerbill

+2

http://welcome.totheinter.net/columnizer-jquery-plugin/ – makshh

回答

1

是的,這可以很容易地通過CSS實現 - 無需插件!雖然,它不支持IE 9

http://www.w3schools.com/css/css3_multiple_columns.asp

還要確保檢查出例如:http://www.w3schools.com/css/tryit.asp?filename=trycss3_column-count

+0

看起來真棒!我一直在尋找這樣的東西,但我一直在尋找JavaScript插件。我不認爲這是可能的只有CSS,謝謝! (我等了一會兒,但你的答案可能會被接受) – Maxime

+0

我試圖減少瀏覽器的大小,但它似乎並沒有改變列號。它在開始時是3,但我想只有2和1,這是可能的嗎? – Maxime

+0

Arf,即使它不是直接可以改變CSS的列數,我可以設法使它與JavaScript!如果我花時間製作一個js模塊,我會更新這篇文章:)! – Maxime