第一个选项

Question

该卡本应位于屏幕中央，但不是，为什么呢？

我正在使用bootstrap 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>

Answer 1

尝试在css文件中的css下面添加

  .card {
            margin: 0 auto; 
            float: none; 
    }

或尝试 mx-auto 引导4 CSS类

Answer 2

不确定默认情况下它应该居中。但是您可以使用CSS类justify-content-center实现Horizontal Alignment，可以将其添加到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> :)

Answer 3

在col-8之前添加的col类没有内容，因此不会主动控制col-8列的间距。确保此列位于容器中心（实际上有12个可用插槽要填充引导内容）的一种方法是使用偏移量类，如下所示：

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

您可以单独使用css样式，但这意味着您应用的引导程序布局将是多余的，不必要的代码。然后，您可以使用flex实用程序类将卡中的内容居中放置在容器中，具体取决于您希望如何证明其合理性。

在这里查看文档-https://getbootstrap.com/docs/4.0/layout/overview/

Answer 4

我认为您尚未添加bootstrap 4 CDN，即（内容分发网络）

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

添加后，您必须在<head></head>标签下的项目HTML页面中添加此CDN，并且可以使用两个选项

第一个选项

<div class="container">
  <div class="row">

    <div class="col-12 center">
     <div class="card">
      <div class="card-body">
       This is some text within a card body.
      </div>
     </div>      
    </div>

  </div>
</div>

将此CSS添加到您的CSS文件中

.center{
  display: flex;
  justify-content: center;
  align-items: center;
}

第二个选项

引导程序4已经提供了一个类justify-content-center

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

  </div>
</div>

您可以查看预览Here

为什么卡不在屏幕中央？

4 个答案:

第一个选项

第二个选项