gpt4 book ai didi

javascript - Bootstrap 响应列重置 div 与 JavaScript 等高脚本

转载 作者:行者123 更新时间:2023-11-28 05:48:57 25 4
gpt4 key购买 nike

只是想让您就引导响应式列重置方面的解决方案提出您的意见。选项 1 - 使用 Bootstrap awsome <div class="clearfix visible-xs-block"></div>

优点:

1) 仅 html 和 CSS

2) 使用内置媒体查询,即固有响应 基于视口(viewport)的大小调整

缺点:

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 使每个 block 具有相同的高度,从而防止问题发生。

优点:1) 代码中没有额外的 html div

缺点:1) 这个解决方案变得响应的唯一方法是让 JS 检查窗口大小并再次应用相等的高度

我敢肯定,每个人都有更多的优点和缺点。

我真的犹豫要不要使用它。

除了征求您的意见外,我想还有一个问题是:在选项 1 的情况下,使用额外的 clearfix div 是否有缺点?

编辑通过建议使用 flexbox,我得到了在 firefox(PC 和 MAC)中工作但在 safari(在 mac 或 ipad/iphone 上)工作的等高 div我的实现如下

        <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

最佳答案

Found the problem. It looks like Firefox is okay with me applying flexbox to the fieldset, however, Safari is not.

Adding a container div inside the fieldset and applying the flexbox to that has fixed the problem for Safari.

Thanks @DhavalChheda for suggesting flexbox. :-)

来自philip

关于javascript - Bootstrap 响应列重置 div 与 JavaScript 等高脚本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37452981/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com