时间戳

首页 > 解决方案 > 为什么卡片不在屏幕中央？

html - 为什么卡片不在屏幕中央？

问题描述

该卡应该在屏幕的中心，但它不是，为什么会这样？？

我正在使用引导程序 4.5

<div class="container">
 <div class="row">
   <div class"col"></div>
    <div class="col-8">
     <div class="card">
      <div class="card-body">
       This is some text within a card body.
      </div>
     </div>      
    </div>
   <div class"col"></div>
 </div>
</div>

标签： htmlcssbootstrap-4

解决方案

默认情况下，不确定它是否应该居中。但是您可以使用 css 类实现水平对齐justify-content-center，您可以将其添加到row：

<div class="container">
  <div class="row justify-content-center">
    <!-- You don't need empty col before and after in this case :) -->
    <div class="col-8">
     <div class="card">
      <div class="card-body">
       This is some text within a card body.
      </div>
     </div>      
    </div>

  </div>
</div>

另外，请注意您在这里有一个小错误：<div class"col"></div>，也许这只是一个错字，在实际代码中它就像<div class="col"></div>:)

推荐阅读