将卡片放入一行 4 html css答案

【问题标题】：put cards into a row of 4 html css将卡片放入一行 4 html css
【发布时间】：2022-01-08 03:30:06
【问题描述】：

我有这个：

<% if(data.length){ 
        var i = 0;
        while (i < data.length) { %>

          <%for ( var j = 0; j < 4; j++) { %>
    
            <div class="text-center">
              <div class="col-lg-4">
            <div class="card shadow mb-4">
              <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary"><%= data[i].NOTES %></h6>
              </div>
              <div class="card-body">
                <div class="chart-pie pt-4">
                  <!-- <canvas id="myPieChart"> -->
                      <img src="https://images.unsplash.com/photo-1633113216120-53ca0a7be5bc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=900&q=60" id="donutimage">
                  <!-- </canvas> -->
                </div>
                <hr>
                Styling for the donut chart can be found in the <code>/js/demo/chart-pie-demo.js</code> file.
              </div>
            </div>
          </div>
        </div>
          <% i++;
          if (i >= data.length){
            j = 4;
          }
          } %>
        <% } 
        }else{ %>
        <p>Unfortunately, no results were found. Please try again or contact an admin if you believe this is an erorr.</p>
        <% } %>

它可以工作，它显示数据库的值，但是，我需要做的是将它们放入 4 行。现在，正在发生的事情是新文件生成的新卡插入到数据库中的是在它的正下方加载，而不是像一行一样在它旁边加载。我只是在使用bootstrap，我希望我可以添加一些自定义 css，但我不知道从哪里开始。我该怎么做？

【问题讨论】：

你可以用css做到这一点stackoverflow.com/questions/29546550/flexbox-4-items-per-row
也许只是把col-lg-4改成col-lg-3？

标签： javascript html css ejs

【解决方案1】：

我不知道你剩下的代码是什么，但要让col 工作，你需要将它包装在row 中作为直接子级。将您的代码更改为：

<% if(data.length) { 
    var i = 0;
    while (i < data.length) { %>
        <div class="row">
            <%for ( var j = 0; j < 4; j++) { %>
                <div class="col-lg-3 text-center">
                    <div class="card shadow mb-4">
                        <div class="card-header py-3">
                            <h6 class="m-0 font-weight-bold text-primary"><%= data[i].NOTES %></h6>
                        </div>
                        <div class="card-body">
                            <div class="chart-pie pt-4">
                            <!-- <canvas id="myPieChart"> -->
                                <img src="https://images.unsplash.com/photo-1633113216120-53ca0a7be5bc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=900&q=60" id="donutimage">
                            <!-- </canvas> -->
                            </div>
                            <hr>
                            Styling for the donut chart can be found in the                  <code>/js/demo/chart-pie-demo.js</code> file.
                        </div>
                    </div>
                </div>
                <% i++;
                    if (i >= data.length){
                        j = 4;
                    }
                } %>
            </div>
        <% } 
    } else { %>
        <p>Unfortunately, no results were found. Please try again or contact an admin if you believe this is an erorr.</p>
    <% } %>

【讨论】：

【解决方案2】：

这就是你要找的东西。它将在每一行中为更大的屏幕创建 4 张卡片-

   <div class="row">
      <div class="col-md-12">
        <div class="row">
          <div class="col-lg-3 mb-4"> <- Get your loop start from here
            HI
          </div>
        </div>
      </div>
    </div>

【讨论】：