单击搜索按钮后引导卡缩小答案

【问题标题】：Bootstrap Card Shrinks after Search Button Clicked单击搜索按钮后引导卡缩小
【发布时间】：2021-01-26 17:22:36
【问题描述】：

我对 Boostrap 很陌生，我主要做后端的工作，但现在做前端的工作。我有一个功能，用户搜索一个地方并弹出附近场所的列表。我希望这些在卡片中弹出。我正在使用引导卡。

当我执行搜索时，卡片会快速向下滚动到一个微小的可滚动版本，并且所有内容 div（地图/卡片）似乎都会下降一点。

我想要实现的是搜索后卡片的标准高度。

这是初始卡：

  <div class="card" style="width: 18rem;">
          <div class="card-body">
            <h5 class="card-title">Places Nearby</h5>
              <div id="cafes">
                <div id="cafe_list"></div>
              </div>
          </div>
        </div>

这是生成列表的函数的 html：

<div class="cafe-details d-flex">
            <ul>
              {% for cafe in cafes %}
              <li>
                <address>
                  <div>
                    <h6 class="cafe-name" data-id="{{ cafe.id }}">{{ cafe.cafe_name }}</h6>
                    <p>{{ cafe.cafe_address }}</p>
                  </div>
                </address>
                <p>
                  <a href="">Add to List</a> / <a href="">Recommend</a>
                </p>
                </li>
              {% endfor %}
            </ul>
          </div>

这是我的 CSS：

.card {
   position: absolute;
   width: 100px;
   border: 1px;
   top: 75px;
   bottom: 10px;
   left: 25px;
   z-index: 10040;
   overflow: auto;
   overflow-y: auto;
}

.cafe-details {
  position: absolute;
}

【问题讨论】：

由于.cafe-details {position: absolute;} 样式，您的卡片会折叠成一个可滚动的小版本。你需要它做什么？对于“大笨空卡”，我无能为力，因为我无法复制它。如果您插入具有错误行为的工作 sn-p，也许我可以提供帮助。
感谢您的回复。我会将位置 css 更改为什么？我删除了它，仍然有同样的问题。我希望它充当用户搜索位置附近的咖啡馆列表的容器。我已经删除了“笨拙”的空卡部分，以使这个问题更加严格，道歉。
我已经用 Snippet 添加了一个答案来演示。如果您的问题仍然存在，我将需要您的整个 css 和 html 代码（从服务器返回并带有结果）。或者如果可以的话，最好插入一个带有错误行为的 sn-p。

标签： html css django bootstrap-4

【解决方案1】：

删除.cafe-details {position: absolute;} 样式。

.card {
  position: absolute;
  width: 100px;
  border: 1px;
  top: 75px;
  bottom: 10px;
  left: 25px;
  z-index: 10040;
  overflow: auto;
  overflow-y: auto;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  <title>Title</title>
</head>

<body>
  <p>This is my web page</p>
  <div class="card" style="width: 18rem;">
    <div class="card-body">
      <h5 class="card-title">Places Nearby</h5>
      <div id="cafes">
        <div id="cafe_list">

          <div class="cafe-details d-flex">
            <ul>

              <li>
                <address>
                  <div>
                    <h6 class="cafe-name" data-id="some_cafe_id">some_cafe_name</h6>
                    <p>some_cafe_address</p>
                  </div>
                </address>
                <p>
                  <a href="">Add to List</a> / <a href="">Recommend</a>
                </p>
              </li>

              <li>
                <address>
                  <div>
                    <h6 class="cafe-name" data-id="another_cafe_id">another_cafe_name</h6>
                    <p>another_cafe_address</p>
                  </div>
                </address>
                <p>
                  <a href="">Add to List</a> / <a href="">Recommend</a>
                </p>
              </li>

            </ul>
          </div>

        </div>
      </div>
    </div>
  </div>
</body>

</html>

【讨论】：