我安装了 Bootstrap 模块。我已经为我的 View 布局制作了自定义 tpl 文件,以去除任何不必要的 div,因此结构如下:
<body>
<div class="mySection">
<div class="container">
<h2>Title</h2>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<a href="linkToContent">
<div>
<img src="contentImg" class="img-responsive"/>
</div>
</a>
</div>
</div>
</div>
</div>
我快崩溃了,因为在 Safari 中为 992px - 1199px,在 Chrome 中为 1200px + 我的第二行列已经出来了。第 4 列向右浮动,第 5 列和第 6 列在第 4 列下方向左浮动,如下所示:
[ 1 ] [ 2 ] [ 3 ]
[ 4 ]
[ 5 ] [ 6 ]
991px 及以下两种浏览器都可以。
我曾假设 div 中有一些东西会丢弃填充或列宽,或者类似的东西,因为我在直 Bootstrap 和 HTML 元素中遇到问题,其中列的内容尽管在视觉上很合适,以类似的方式将列推出。所以,我已经将其剥离并删除了我自己的 CSS 和大部分内容,但实际上现在比以前更糟(在 Chrome 中还不错)。
我在去除行中的排水沟方面取得了一些成功,但这在其他方面造成了问题。
现在想知道使用 Drupal 的 Bootstrap 是否比它的值(value)更麻烦,我应该改用像响应式网格系统这样的简单网格系统。非常欢迎任何建议或帮助!
最佳答案
当您的一个(或某些)列的垂直尺寸略有不同时,通常会发生这种情况。要解决此问题,您应该使用 bootstrap 提供的行,并将每 3 列包含在不同的行中。
关于css - Drupal 7 中的 Twitter Bootstrap 列未在 Safari 中排列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30242625/