Bootstrap列沒有換行

-1

我已經從w3layouts.com下載了CC3.0許可下的現成HTML5網站模板。由於像Bootstrap等使用的腳本都是舊版本，我正在更新這些和源代碼的功能。但是我遇到了一個我無法解決的問題。我是Bootstrap的新手，這是我第一次使用它。我厭倦了編寫我自己的設計。 :)Bootstrap列沒有換行

原始/舊模板使用Bootstrap v3.3.4，我現在使用4.0.0-beta。

正如您所見，here in the original「我的服務」部分已完成。但在my updated version列不會換行。我已經嘗試了很多東西，Google搜索了很多，但沒有找到解決方案。

下面是源代碼：

HTML：https：//開頭pastebin.com/NJYmqAk2
CSS：https：//開頭pastebin.com/AdYUTtFe

（對不起，我必須修改pastebin鏈接'因爲我不是很高聲譽atm :)）

來源

2017-10-16 Johannes Mages

您的鏈接不適合我。我認爲你應該在帖子中發佈html/css代碼。 –

看來，您正在使用Bootstrap的版本，沒有劃分列的寬度％，也不是浮動剩下。

在您的HTML中，圍繞每列包含行存在大問題。

<div class="row"> <!-- This wraps the column and defeats its purpose --> 
<div class="col-xs-4 wthree_about_right_grid_left"> 
    <div class="hvr-rectangle-in"> 
     <i class="glyphicon glyphicon-pencil"></i> 
    </div> 
</div> 
</div>

開始刪除行，然後你想要讓這些柱子向左浮動並確定它的寬度爲％。

像這樣：

通過這樣做，你可以得到它像你的模板，並最終解決您最初的問題。

您將從使用與您的模板兼容的引導版本中獲益更多。

來源

2017-10-16 09:46:41

Bootstrap 4爲其網格系統使用flexbox，而不是浮動！ – tobiv

對，因此我的答案是矛盾的。將Bootstrap 3模板與Bootstrap 4混合並不是一個好的起點。 –

謝謝你的解答。我會嘗試。但如果你說使用Bootstrap 3版本更好，那麼也許我應該停止更新並使用原始版本。我的想法是讓模板更新。看起來像Bootstrap更復雜，因爲我認爲。 :)啊順便說一句。我把col的'cuz Bootlint告訴了我一定是。 –

Bootstrap列沒有換行

回答

相關問題