-1

我从 w3layouts.com 下载了一个 CC3.0 许可的现成 HTML5 网站模板。因为像 Bootstrap 等使用的脚本都是旧版本，所以我正在更新这些和源代码以使其正常工作。但我遇到了一个我无法解决的问题。我是 Bootstrap 的新手，这是我第一次使用它。我厌倦了编写自己的设计。:)

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

正如您在原始文件中看到的那样，“我的服务”部分已经成型。但在我的更新版本中，列不会换行。我已经尝试了很多东西并用 Google 搜索了很多，但没有找到解决方案。

以下是源代码：

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

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

4

1 回答 1

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>

从删除行开始，然后你要让列向左浮动并确定它的宽度（以 % 为单位）。

像这样： 在此处输入图像描述

通过这样做，您可以让它在您的模板上运行，并最终解决您最初的问题。

使用与您的模板兼容的引导程序版本将使您受益更多。

于 2017-10-16T09:46:41.393 回答