没有Bootstrap列的包装

Question

我已经从w3layouts.com下载了一个现成的HTML5网站模板，该模板属于CC3.0许可证。因为像Bootstrap等使用的脚本都是旧版本，我正在更新这些以及要运行的源代码。但是我遇到了一个无法解决的问题。我是Bootstrap的新手，这是我第一次使用它。我厌倦了编写自己的设计。 ：）

原始/旧模板正在使用Bootstrap v3.3.4，我现在使用4.0.0-beta。

正如您所见，here in the original“我的服务”部分已全部成型。但在my updated version中，列不会换行。我已经尝试了很多东西并且谷歌搜索了很多但没有找到解决方案。

以下是源代码：

• HTML：https：// pastebin.com/NJYmqAk2
• CSS：https：// pastebin.com/AdYUTtFe

（抱歉，我不得不修改pastebin链接'因为我不是很高的声誉atm。:)）

Answer 1

您正在使用的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>

首先删除该行，然后你想要让colums向左浮动，并以％表示它的宽度。

像这样：

通过这样做，你可以让它像你的模板一样，最终解决你的初始问题。

使用与您的模板兼容的bootstrap版本会带来更多好处。