Question

我正在尝试在提供的卡片之间添加一些节奏，但在卡片之间添加一些空间时遇到了一些问题。

这是目前在我的网站上的样子：

目前我的代码是这样的

        <div class="row justify-content-center">
            <div class="card" style="width: 18rem;">
                <img class="card-img-top" src="..." alt="Card image cap">
                <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 class="card" style="width: 18rem;">
                <img class="card-img-top" src="..." alt="Card image cap">
                <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 class="card" style="width: 18rem;">
                <img class="card-img-top" src="..." alt="Card image cap">
                <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>

我想知道是否必须添加某种填充物，例如 ml-5 之类的东西。

Answer 1

.card{
  margin-right:20px!important;
  }
your can modify your card default margin and definitely used !important

Answer 2

您必须将 margin 给每个孩子 div，如下所示使用整页视图查看此代码段。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
      <div class="row justify-content-center p-4">
            <div class="card mr-2" style="width: 18rem;">
                <img class="card-img-top" src="..." alt="Card image cap">
                <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 class="card mr-2" style="width: 18rem;">
                <img class="card-img-top" src="..." alt="Card image cap">
                <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 class="card mr-2" style="width: 18rem;">
                <img class="card-img-top" src="..." alt="Card image cap">
                <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>
</body>
</html>

Answer 3

您可以根据您的要求在父 div 中添加以下类。哪里有“行对齐内容中心”类。

    Where property is one of: 
   
    m - for classes that set margin
    p - for classes that set padding

    Where sides is one of:
    
    t - for classes that set margin-top or padding-top
    b - for classes that set margin-bottom or padding-bottom
    l - for classes that set margin-left or padding-left
    r - for classes that set margin-right or padding-right
    x - for classes that set both *-left and *-right
    y - for classes that set both *-top and *-bottom
    blank - for classes that set a margin or padding on all 4 sides of the element

Answer 4

水平边距

<div class="card mx-3" style="width: 18rem;">

左边距

<div class="card ml-3" style="width: 18rem;">

右边距

<div class="card mr-3" style="width: 18rem;">

在引导卡之间添加间距

4 个答案: