Question

我正在着陆页，想水平放置两张卡片。问题是我希望它们缩小到每张具有“ col-md-3”类的卡，但是我不能将它们居中。我尝试过的具有CSS样式的代码段如下：

.card {
        margin: 0 auto; /* Added */
        float: none; /* Added */
        margin-bottom: 10px; /* Added */
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid">
  <div class="row text-center">
    <div class="col-md-3 mb-3">
      <div class="card h-100">
        <i class="card-img-top"></i>
        <div class="card-body">
          <h4 class="card-title">Registracija</h4>
          <p class="card-text">Registriraj se i počni igrati!</p>
        </div>
        <div class="card-footer py-4">
          <a href="#" class="btn btn-secondary">See portfolio &raquo;</a>
        </div>
      </div>
    </div>

    <div class="col-md-3 mb-3">
      <div class="card h-100">
        <i class="card-img-top"></i>
        <div class="card-body">
          <h4 class="card-title">Prijava</h4>
          <p class="card-text">Ako si registriran, prijavi se ovdje!</p>
        </div>
        <div class="card-footer py-4">
          <a href="#" class="btn btn-secondary">See portfolio &raquo;</a>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

找到解决方案：将row类的div更改为包含justify-content-center。

<div class="row justify-content-center">

将卡在容器流体中水平居中

1 个答案: