将卡片排成一排 4 html css

Question

我有这个：

<% 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，但我不确定从哪里开始。我该怎么做？

Answer 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>
    <% } %>

Answer 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>

将卡片排成一排 4 html css

put cards into a row of 4 html css

html

javascript

css

ejs