Question

我正在尝试向由Bootstrap卡组成的图片库中添加一些关键字标签。一切都按预期工作，除了锚定标签包裹的元素不可点击之外。

问题似乎类似于以下内容：href link inside modal is not working和以下内容：Anchor links in bootstrap don't work 但是，在这种情况下，这两种解决方案似乎都不适用。问题似乎出在“ card-img-overlay”覆盖了标签上。

{% block page_content %}
<div class="container">
  <legend>Gallery</legend>
  <div class="row">
    {% set current_page=gallery_items_page %}
    {% for item in current_page.items %}
    {% if item.published == True %}
    <div class="col-4">
      <div class="card mb-3">
    <img style="width: 100%;" src="{{ url_for('images.static', filename=item.cover_picture[0].file_name) }}" class="img-fluid card-img" alt="responsive">
    <div class="card-img-overlay">
      <h1 style='font-family: "Miniver"' class="text-white">{{ item.title }}</h1>
    </div>
    <div class="card-header">
      {% for kw in item.keywords %}
      {# it's probably more efficient to use the PK, but more expressive to use the string... #}
      <a href="{{ url_for('search.search_keyword', keyword=kw.keyword) }}" class="badge badge-primary">{{ kw.keyword }}</a>
      {% endfor %}
    </div>
      </div>
    </div>
    {% endif %}
    {% endfor %}
  </div>
</div>
{% endblock %}

使用Firefox上的inspect element工具，可以看到Jinja2模板中的URL正常工作，一切看起来都如预期，并且链接本身也很好，只是不可点击。如果我将链接放在card div之外，则链接功能正常。

这里是一个小提琴：https://jsfiddle.net/us4Lmqbp/

Answer 1

您的锚标记不可点击，因为它位于private String HttpPost(String[] params) throws IOException, JSONException { String result = ""; String urlPost = "http://10.0.2.2:1080/claim/sustenance"; URL url = new URL(urlPost); // create HttpURLConnection HttpURLConnection conn = (HttpURLConnection) url.openConnection(); conn.setRequestMethod("POST"); conn.setRequestProperty("User-Agent","Mozilla/5.0 ( compatible ) "); conn.setRequestProperty("Accept","*/*"); conn.setRequestProperty("Content-Type", "application/cfp+json"); conn.setRequestProperty("Accept-Charset", "UTF-8"); //conn.setRequestProperty("Accept", "application/json"); conn.setDoOutput(true); // build JSON object JSONObject jsonObject = buildJsonObject(params); String jsonString = jsonObject.toString(); // add JSON content to POST request body try(OutputStream os = conn.getOutputStream()) { byte[] input = jsonString.getBytes("utf-8"); os.write(input, 0, input.length); } try(BufferedReader br = new BufferedReader( new InputStreamReader(conn.getInputStream(), "utf-8"))) { StringBuilder response = new StringBuilder(); String responseLine = null; while ((responseLine = br.readLine()) != null) { response.append(responseLine.trim()); } return response.toString(); } }下。因此，当您单击时，您单击的是该div而不是锚标记。您可以通过右键单击浏览器中的定位标记并选择“检查”来识别此问题。在检查器窗口中，选择了单击的实际元素。

要使定位标记可点击，您需要：

通过赋予div样式，使div变得“透明” div.card-img-overlay（了解更多here）。 jsFiddle

或

通过增加其z-index（将样式pointer-events: none并添加z-index: 20-z-index可以在静态放置的元素上不起作用，这是默认设置浏览器样式）。 jsFiddle

引导标签在Bootstrap card-img-overlay中不可点击

1 个答案: