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

Question

只是想让您就引导响应式列重置方面的解决方案提出您的意见。 选项 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

Answer 1

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