时间戳

首页 > 解决方案 > 单击搜索按钮后引导卡缩小

html - 单击搜索按钮后引导卡缩小

问题描述

我对 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;
}

标签： htmlcssdjangobootstrap-4

解决方案

删除.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>

推荐阅读