只是想让您询问您对自助响应列重置的解决方案的看法。
选项1 - 使用bootstraps awsome <div class="clearfix visible-xs-block"></div>
优点：
1）html＆amp;仅限CSS
2）使用内置媒体查询，即非常敏感 基于视口大小调整
缺点：
1）可能导致基于您拥有的媒体查询数量过多的标记
<div class="col-3-lg col-4-sm col-6-xs">module 1</div>
<div class="col-3-lg col-4-sm col-6-xs">module 2</div>
<div class="clearfix visible-xs-block"></div>
<div class="col-3-lg col-4-sm col-6-xs">module 2</div>
<div class="clearfix visible-sm-block"></div>
<div class="col-3-lg col-4-sm col-6-xs">module 2</div>
<div class="clearfix visible-lg-block"></div>
选项2 - 使用javascript使每个块具有相同的高度，从而防止出现问题。
优点： 1）代码中没有额外的html div
缺点： 1）此解决方案响应的唯一方法是让JS检查窗口大小调整并再次应用相同的高度
我确信每个人都有更多的利弊。
我真的想要使用它。
除了询问你对自己喜欢的意见之外，我猜一个问题是：在选项1的情况下，是否有额外的clearfix div存在缺点？
EDIT 建议使用flexbox我得到相同的高度div在firefox（PC和MAC）工作但不是safari（在mac或ipad / iphone上） 我的实现如下
<fieldset id="tab-vehicle" class="tab-pane active" style="display:flex; flex-wrap:wrap;">
<?PHP
//$i=1;
foreach ($this->vehicles as $vehicle){
?>
<div class="v-details col-lg-3 col-md-4 col-sm-6 vehicle<?PHP echo $vehicle->id; ?>">
<div>
<div class="vc-image "><img src="<?PHP echo $vehicle->image; ?>" alt="pegasus samos rent-a-car <?PHP echo $vehicle->make; ?> <?PHP echo $vehicle->model; ?>" /></div>
<div class="vc-make-model"><?PHP echo $vehicle->make; ?> <?PHP echo $vehicle->model; ?></div>
<div class="vc-engine"><?PHP echo $vehicle->engine; ?></div>
<div class="vc-features"><?PHP echo $vehicle->features; ?></div>
<a href="#tab-booking" class="btn btn-warning selected" data-vehicle="<?PHP echo $vehicle->id; ?>">I'll have this one</a>
</div>
</div>
<?PHP
//if ($i % 2 == 0) echo '<div class="clearfix visible-xs-block"></div>';
//if ($i % 3 == 0) echo '<div class="clearfix visible-sm-block"></div>';
//if ($i % 3 == 0) echo '<div class="clearfix visible-md-block"></div>';
//if ($i % 4 == 0) echo '<div class="clearfix visible-lg-block"></div>';
//$i++;
};
?>
</fieldset>
从上面的PHP生成的代码如下
<fieldset style="display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap;" class="tab-pane active" id="tab-vehicle">
<div class="v-details col-lg-3 col-md-4 col-sm-6 vehicle1">
<div>
<div class="vc-image "><img alt="pegasus samos rent-a-car Kia Picanto" src="/images/vehicles/picanto.jpg"></div>
<div class="vc-make-model">Kia Picanto</div>
<div class="vc-engine">1000cc</div>
<div class="vc-features"><ul class="tabs list-inline"><li class="label label-info">4 Doors</li><li class="label label-info"> 5 Seats</li><li class="label label-info"> Air Con</li></ul></div>
<a data-vehicle="1" class="btn btn-warning selected" href="#tab-booking">I'll have this one</a>
</div>
</div>
<div class="v-details col-lg-3 col-md-4 col-sm-6 vehicle6 active">
<div>
<div class="vc-image "><img alt="pegasus samos rent-a-car Hyundai Atos" src="/images/vehicles/atos.jpg"></div>
<div class="vc-make-model">Hyundai Atos</div>
<div class="vc-engine">1100cc</div>
<div class="vc-features"><ul class="tabs list-inline"><li class="label label-info">4 Doors</li><li class="label label-info"> 5 Seats</li><li class="label label-info"> Air Con</li></ul></div>
<a data-vehicle="6" class="btn btn-warning selected" href="#tab-booking">I'll have this one</a>
</div>
</div>
<div class="v-details col-lg-3 col-md-4 col-sm-6 vehicle4">
<div>
<div class="vc-image "><img alt="pegasus samos rent-a-car Suzuki Splash" src="/images/vehicles/suzuki_splash.jpg"></div>
<div class="vc-make-model">Suzuki Splash</div>
<div class="vc-engine">1300cc</div>
<div class="vc-features"><ul class="tabs list-inline"><li class="label label-info">5 Doors</li><li class="label label-info"> 5 Seats</li><li class="label label-info"> Air Con</li></ul></div>
<a data-vehicle="4" class="btn btn-warning selected" href="#tab-booking">I'll have this one</a>
</div>
</div>
<div class="v-details col-lg-3 col-md-4 col-sm-6 vehicle7">
<div>
<div class="vc-image "><img alt="pegasus samos rent-a-car Hyundai i10" src="/images/vehicles/hyundai_i10.jpg"></div>
<div class="vc-make-model">Hyundai i10</div>
<div class="vc-engine">1200cc</div>
<div class="vc-features"><ul class="tabs list-inline"><li class="label label-info">5 Doors</li><li class="label label-info"> 5 Seats</li><li class="label label-info"> Air Con</li></ul></div>
<a data-vehicle="7" class="btn btn-warning selected" href="#tab-booking">I'll have this one</a>
</div>
</div>
<div class="v-details col-lg-3 col-md-4 col-sm-6 vehicle8">
<div>
<div class="vc-image "><img alt="pegasus samos rent-a-car Hyundai i20" src="/images/vehicles/hyundai_i20.jpg"></div>
<div class="vc-make-model">Hyundai i20</div>
<div class="vc-engine">1200cc</div>
<div class="vc-features"><ul class="tabs list-inline"><li class="label label-info">5 Doors</li><li class="label label-info"> 5 Seats</li><li class="label label-info"> Air Con</li></ul></div>
<a data-vehicle="8" class="btn btn-warning selected" href="#tab-booking">I'll have this one</a>
</div>
</div>
<div class="v-details col-lg-3 col-md-4 col-sm-6 vehicle9">
<div>
<div class="vc-image "><img alt="pegasus samos rent-a-car Hyundai i30" src="/images/vehicles/hyundai_i30.jpg"></div>
<div class="vc-make-model">Hyundai i30</div>
<div class="vc-engine">1400</div>
<div class="vc-features"><ul class="tabs list-inline"><li class="label label-info">5 Doors</li><li class="label label-info"> 5 Seats</li><li class="label label-info"> Air Con</li></ul></div>
<a data-vehicle="9" class="btn btn-warning selected" href="#tab-booking">I'll have this one</a>
</div>
</div>
<div class="v-details col-lg-3 col-md-4 col-sm-6 vehicle12">
<div>
<div class="vc-image "><img alt="pegasus samos rent-a-car Kia Rio" src="/images/vehicles/kia-rio.jpg"></div>
<div class="vc-make-model">Kia Rio</div>
<div class="vc-engine">1300cc</div>
<div class="vc-features"><ul class="tabs list-inline"><li class="label label-info">4 Doors</li><li class="label label-info"> 5 Seats</li><li class="label label-info"> Air Con</li></ul></div>
<a data-vehicle="12" class="btn btn-warning selected" href="#tab-booking">I'll have this one</a>
</div>
</div>
<div class="v-details col-lg-3 col-md-4 col-sm-6 vehicle10">
<div>
<div class="vc-image "><img alt="pegasus samos rent-a-car Suzuki Samurai" src="/images/vehicles/samurai.jpg"></div>
<div class="vc-make-model">Suzuki Samurai</div>
<div class="vc-engine">1300cc</div>
<div class="vc-features"><ul class="tabs list-inline"><li class="label label-info">2 Doors</li><li class="label label-info"> 4 Seats</li><li class="label label-info"> Cabriolet</li><li class="label label-info"> Air Con</li></ul></div>
<a data-vehicle="10" class="btn btn-warning selected" href="#tab-booking">I'll have this one</a>
</div>
</div>
<div class="v-details col-lg-3 col-md-4 col-sm-6 vehicle15">
<div>
<div class="vc-image "><img alt="pegasus samos rent-a-car Opel Astra Elegance" src="/images/vehicles/opel_astra.jpg"></div>
<div class="vc-make-model">Opel Astra Elegance</div>
<div class="vc-engine">1400cc</div>
<div class="vc-features"><ul class="tabs list-inline"><li class="label label-info">5 Doors</li><li class="label label-info"> 5 Seats</li><li class="label label-info"> Air Con</li><li class="label label-info"> Automatic</li></ul></div>
<a data-vehicle="15" class="btn btn-warning selected" href="#tab-booking">I'll have this one</a>
</div>
</div>
<div class="v-details col-lg-3 col-md-4 col-sm-6 vehicle5">
<div>
<div class="vc-image "><img alt="pegasus samos rent-a-car Peugot 307 Cabrio" src="/images/vehicles/peugeot307.jpg"></div>
<div class="vc-make-model">Peugot 307 Cabrio</div>
<div class="vc-engine">1600cc</div>
<div class="vc-features"><ul class="tabs list-inline"><li class="label label-info">2 Doors</li><li class="label label-info"> 4 Seats</li><li class="label label-info"> Cabriolet</li><li class="label label-info"> Air Con</li></ul></div>
<a data-vehicle="5" class="btn btn-warning selected" href="#tab-booking">I'll have this one</a>
</div>
</div>
<div class="v-details col-lg-3 col-md-4 col-sm-6 vehicle11">
<div>
<div class="vc-image "><img alt="pegasus samos rent-a-car Suzuki Jimny" src="/images/vehicles/jimny.jpg"></div>
<div class="vc-make-model">Suzuki Jimny</div>
<div class="vc-engine">1300cc</div>
<div class="vc-features"><ul class="tabs list-inline"><li class="label label-info">2 Doors</li><li class="label label-info"> 4 Seats</li><li class="label label-info"> Cabriolet</li><li class="label label-info"> Air Con</li></ul></div>
<a data-vehicle="11" class="btn btn-warning selected" href="#tab-booking">I'll have this one</a>
</div>
</div>
<div class="v-details col-lg-3 col-md-4 col-sm-6 vehicle14">
<div>
<div class="vc-image "><img alt="pegasus samos rent-a-car Nissan Serena" src="/images/vehicles/serena.jpg"></div>
<div class="vc-make-model">Nissan Serena</div>
<div class="vc-engine">1600cc</div>
<div class="vc-features"><ul class="tabs list-inline"><li class="label label-info">5 Doors</li><li class="label label-info"> Air Con</li><li class="label label-info"> 8 Seats</li></ul></div>
<a data-vehicle="14" class="btn btn-warning selected" href="#tab-booking">I'll have this one</a>
</div>
</div>
<div class="v-details col-lg-3 col-md-4 col-sm-6 vehicle13">
<div>
<div class="vc-image "><img alt="pegasus samos rent-a-car Renault Espace" src="/images/vehicles/espace.jpg"></div>
<div class="vc-make-model">Renault Espace</div>
<div class="vc-engine">1900cc</div>
<div class="vc-features"><ul class="tabs list-inline"><li class="label label-info">4 Doors</li><li class="label label-info"> Air Con</li><li class="label label-info"> 7 Seats</li><li class="label label-info"> Diesel</li></ul></div>
<a data-vehicle="13" class="btn btn-warning selected" href="#tab-booking">I'll have this one</a>
</div>
</div>
<div class="v-details col-lg-3 col-md-4 col-sm-6 vehicle3">
<div>
<div class="vc-image "><img alt="pegasus samos rent-a-car Sym SR" src="/images/vehicles/sym150.jpg"></div>
<div class="vc-make-model">Sym SR</div>
<div class="vc-engine">150cc</div>
<div class="vc-features"></div>
<a data-vehicle="3" class="btn btn-warning selected" href="#tab-booking">I'll have this one</a>
</div>
</div>
<div class="v-details col-lg-3 col-md-4 col-sm-6 vehicle2">
<div>
<div class="vc-image "><img alt="pegasus samos rent-a-car Honda Transalp" src="/images/vehicles/honda_transalp_650cc.jpg"></div>
<div class="vc-make-model">Honda Transalp</div>
<div class="vc-engine">650cc</div>
<div class="vc-features"></div>
<a data-vehicle="2" class="btn btn-warning selected" href="#tab-booking">I'll have this one</a>
</div>
</div>
<div class="v-details col-lg-3 col-md-4 col-sm-6 vehicle16">
<div>
<div class="vc-image "><img alt="pegasus samos rent-a-car Honda XR" src="/images/vehicles/honda-xr-125.jpg"></div>
<div class="vc-make-model">Honda XR</div>
<div class="vc-engine">125cc</div>
<div class="vc-features"></div>
<a data-vehicle="16" class="btn btn-warning selected" href="#tab-booking">I'll have this one</a>
</div>
</div>
</fieldset>
它在我的开发机器上，所以我无法给你一个链接。结果看起来像这样 flexbox issue with safari
答案 0 :(得分：0)
发现问题。看起来Firefox可以将
flexbox应用到fieldset，但Safari不是。在
div中添加容器fieldset并将flexbox应用于该问题已解决了Safari的问题。感谢@DhavalChheda建议
flexbox。 ： - ）
