Question

当前，我正在电子商务网站上工作（我是新手）。
我正在使用引导程序进行基本样式设置。
结构如下。
“ nl-row”类的div是动态的。取决于数据库中项目的数量，它将增加。
所以我正在尝试将div动态居中于“ .container” div中。
“ nl行”的宽度为300px，因此，如果“ .container”的宽度为1000px，则应该连续3个“ nl行”，如果“ .container”具有宽度为700像素，应该连续2个“ nl行”，并且应将自己居中。

-请帮助我解决这个问题。

<div id="nl-container-1" class="nl-container">
  <div class="nl-row">
    <div class="card" style="width: 18rem;">
    <img src="img/250x180.png" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>
  </div>

  <div class="nl-row">
    <div class="card" style="width: 18rem;">
    <img src="img/250x180.png" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>
  </div>

  <div class="nl-row">
    <div class="card" style="width: 18rem;">
    <img src="img/250x180.png" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>
  </div>

</div>

Answer 1

供家长使用（display：flex; justify-content：center），供孩子使用：width 300px）

用固定宽度的<div>填充一个框

1 个答案: