Question

我有以下HTML和CSS

<div class="">
      <div data-th-if="${foo.prop1}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop2}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop3}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop4}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop5}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop6}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop7}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop1}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop1}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop1}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop1}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop1}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop1}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop1}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop1}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop1}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop1}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop1}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop1}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop1}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop1}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop1}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop1}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop1}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop1}" class="data-box"> some data </div>
     .... more div continue
   </div>

这是CSS

   .data-box {
   width: 150px;
   background-color: yellow;
   margin-top: 0;
   margin-bottom: 5px;
   margin-left: 0; 
   margin-right: 5px;
   border: 1px solid red;
   }

模板将生成div的变量，具体取决于输入的数据值，如图所示。

我想组织这些div盒子，桌面上有5个div盒子，ipad有3个div盒子，手机有两个div盒子，非常低分辨率的手机连续有一个div盒子。如何使用Boostrap 4实现这一目标？

Answer 1

您可以在父级上添加“row wrap”类，之后您可以在数据框中为媒体查询提供所需的任何宽度。

  .data-box {
   width: 20%;
   background-color: yellow;
   margin-top: 0;
   margin-bottom: 5px;
   margin-left: 0; 
   margin-right: 5px;
   border: 1px solid red;
   }
   
   @media all and (max-width:1023){
    .data-box {width:33.33%}
   } 
@media all and (max-width:600){
    .data-box {width:50%}
   }
@media all and (max-width:420){
    .data-box {width:100%}
   }

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/css/bootstrap.css" rel="stylesheet"/>
<div class="row wrap mx-auto">
      <div data-th-if="${foo.prop1}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop2}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop3}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop1}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop1}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop1}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop1}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop1}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop1}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop1}" class="data-box"> some data </div>
   </div>

如何在bootstrap 4中使大量div盒响应？

1 个答案: