Question

example of the messiness

行中的这些项目都具有不同的高度，并从数据库中绘制。我希望我的页面保持移动友好，但让行看起来更干净（每个'o'表示其中一个商店项目）：

o o o o

如果屏幕尺寸缩小，它可能如下所示：

o o o

o o

或者

o o

bootstrap不是这种造型的最佳工具吗？或者我应该使用带有大量媒体查询的css？ 我想我只需要每行的高度与行中最大项目的高度一样大。我如何使用bootstrap（如果可能）这样做？提前谢谢！

Answer 1

您可以覆盖默认边距和填充。

var $;

require("jsdom").env("", function(err, window) {
    if (err) {
        console.error(err);
        return;
    }
    $ = require("jquery")(window);
    doSomething();
});

 function doSomething(){
    var deferred = $.Deferred();
}

或者随心所欲地制作它们。您还可以使用检查器查找要更改的元素，并将它们放在要覆盖的css文件中。

Answer 2

在bootstrap手册中查看this section。它描述了如何做到你想要的。

它使用类clearfix visible-xs-block的div，仅在12 xs列之后对xs设备可见。这会清除浮动，以便后续列不会受到不同高度的影响。这是另一个例子：

<div class="col-sm-4 col-md-3"></div>
<div class="col-sm-4 col-md-3"></div>
<div class="col-sm-4 col-md-3"></div>
<div class="clearfix visible-sm-block">
<div class="col-sm-4 col-md-3"></div>
<div class="clearfix visible-md-block">

注意12个sm列之后我添加<div class="clearfix visible-sm-block">将清除sm列，在12 md列后添加<div class="clearfix visible-md-block">将清除md列。

如何使bootstrap行更干净？

2 个答案: