0

我有一个问题，当我添加其他文本时，卡片内的项目彼此不对齐。

正如您在下图中所见，书籍和推荐书籍中的项目是匹配/对齐的。. 在此处输入图像描述

这是我在推荐书籍中添加查看次数时的图像。

如您所见，书 1 中的项目已调整，我不希望发生这种情况我想匹配/对齐书籍中的第 1 和推荐书籍中的第 1，即使在推荐书籍中添加了查看次数后也是如此。 在此处输入图像描述

所以这是我的卡片代码。

<div class="col">
  <div class="card w-100 h-100" style="width: 25rem;">
    <div class="card-body bg-light">
      <h5 class="card-title text-center">Books</h5>
    </div>
    <div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
      <p class="p-3 mr-2">1</p>
      <div>
        <a class="fancybox" href="admin/files/Images/Networking_Security.png">
          <img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
        </a>
      </div>
      <div class="card-body">
        <p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
        <button class="col m-0 btn btn-info btn-sm">View</button>
      </div>
    </div>
    <div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
      <p class="p-3 mr-2">2</p>
      <div>
        <a class="fancybox" href="admin/files/Images/Networking_Security.png">
          <img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
        </a>
      </div>
      <div class="card-body">
        <p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
        <button class="col m-0 btn btn-info btn-sm">View</button>
      </div>
    </div>
    <div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
      <p class="p-3 mr-2">3</p>
      <div>
        <a class="fancybox" href="admin/files/Images/Networking_Security.png">
          <img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
        </a>
      </div>
      <div class="card-body">
        <p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
        <button class="col m-0 btn btn-info btn-sm">View</button>
      </div>
    </div>
    <div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
      <p class="p-3 mr-2">4</p>
      <div>
        <a class="fancybox" href="admin/files/Images/Networking_Security.png">
          <img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
        </a>
      </div>
      <div class="card-body">
        <p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
        <button class="col m-0 btn btn-info btn-sm">View</button>
      </div>
    </div>
  </div>
</div>
<div class="col">
  <div class="card w-100 h-100" style="width: 25rem;">
    <div class="card-body bg-light">
      <h5 class="card-title text-center">Recommended Books</h5>
    </div>
    <div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
      <p class="p-3 mr-2">1</p>
      <div>
        <a class="fancybox" href="admin/files/Images/Networking_Security.png">
          <img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
        </a>
      </div>
      <div class="card-body">
        <p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
        <span class="col m-0">Views: 28</span>
        <button class="col m-0 btn btn-info btn-sm">View</button>
      </div>
    </div>
    <div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
      <p class="p-3 mr-2">2</p>
      <div>
        <a class="fancybox" href="admin/files/Images/Networking_Security.png">
          <img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
        </a>
      </div>
      <div class="card-body">
        <p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
        <span class="col m-0">Views: 28</span>

        <button class="col m-0 btn btn-info btn-sm">View</button>
      </div>
    </div>
    <div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
      <p class="p-3 mr-2">3</p>
      <div>
        <a class="fancybox" href="admin/files/Images/Networking_Security.png">
          <img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
        </a>
      </div>
      <div class="card-body">
        <p class="col m-0" style="font-size: 1rem; ">Library Management System</p>.
        <span class="col m-0">Views: 28</span>
        <button class="col m-0 btn btn-info btn-sm">View</button>
      </div>
    </div>
    <div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
      <p class="p-3 mr-2">4</p>
      <div>
        <a class="fancybox" href="admin/files/Images/Networking_Security.png">
          <img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
        </a>
      </div>
      <div class="card-body">
        <p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
        <span class="col m-0">Views: 28</span>

        <button class="col m-0 btn btn-info btn-sm">View</button>
      </div>
    </div>
  </div>
</div>

据我所知，w-100并使h-100卡片相互响应。但是我希望items来自书籍和推荐书籍 items的匹配..我做了 w-100 和 h-100 以响应卡片的宽度和高度。

编辑：我已经删除了h-100我卡中的内容，这就是结果。我希望书籍的高度和推荐的高度应该匹配。但是，当我将其退回时，项目未对齐，如第二张图片所示。 在此处输入图像描述

4

1 回答 1

0

删除包装器h-100上的类：card-body

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="row">
<div class="col">
  <div class="card w-100" style="width: 25rem;">
    <div class="card-body bg-light">
      <h5 class="card-title text-center">Books</h5>
    </div>
    <div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
      <p class="p-3 mr-2">1</p>
      <div>
        <a class="fancybox" href="admin/files/Images/Networking_Security.png">
          <img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
        </a>
      </div>
      <div class="card-body">
        <p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
        <button class="col m-0 btn btn-info btn-sm">View</button>
      </div>
    </div>
    <div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
      <p class="p-3 mr-2">2</p>
      <div>
        <a class="fancybox" href="admin/files/Images/Networking_Security.png">
          <img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
        </a>
      </div>
      <div class="card-body">
        <p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
        <button class="col m-0 btn btn-info btn-sm">View</button>
      </div>
    </div>
    <div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
      <p class="p-3 mr-2">3</p>
      <div>
        <a class="fancybox" href="admin/files/Images/Networking_Security.png">
          <img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
        </a>
      </div>
      <div class="card-body">
        <p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
        <button class="col m-0 btn btn-info btn-sm">View</button>
      </div>
    </div>
    <div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
      <p class="p-3 mr-2">4</p>
      <div>
        <a class="fancybox" href="admin/files/Images/Networking_Security.png">
          <img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
        </a>
      </div>
      <div class="card-body">
        <p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
        <button class="col m-0 btn btn-info btn-sm">View</button>
      </div>
    </div>
  </div>
</div>
<div class="col">
  <div class="card w-100 h-100" style="width: 25rem;">
    <div class="card-body bg-light">
      <h5 class="card-title text-center">Recommended Books</h5>
    </div>
    <div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
      <p class="p-3 mr-2">1</p>
      <div>
        <a class="fancybox" href="admin/files/Images/Networking_Security.png">
          <img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
        </a>
      </div>
      <div class="card-body">
        <p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
        <span class="col m-0">Views: 28</span>
        <button class="col m-0 btn btn-info btn-sm">View</button>
      </div>
    </div>
    <div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
      <p class="p-3 mr-2">2</p>
      <div>
        <a class="fancybox" href="admin/files/Images/Networking_Security.png">
          <img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
        </a>
      </div>
      <div class="card-body">
        <p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
        <span class="col m-0">Views: 28</span>

        <button class="col m-0 btn btn-info btn-sm">View</button>
      </div>
    </div>
    <div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
      <p class="p-3 mr-2">3</p>
      <div>
        <a class="fancybox" href="admin/files/Images/Networking_Security.png">
          <img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
        </a>
      </div>
      <div class="card-body">
        <p class="col m-0" style="font-size: 1rem; ">Library Management System</p>.
        <span class="col m-0">Views: 28</span>
        <button class="col m-0 btn btn-info btn-sm">View</button>
      </div>
    </div>
    <div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
      <p class="p-3 mr-2">4</p>
      <div>
        <a class="fancybox" href="admin/files/Images/Networking_Security.png">
          <img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
        </a>
      </div>
      <div class="card-body">
        <p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
        <span class="col m-0">Views: 28</span>

        <button class="col m-0 btn btn-info btn-sm">View</button>
      </div>
    </div>
  </div>
</div>
</div>

于 2021-05-22T01:46:47.483 回答