html - 列表项中的 Bootstrap 侧边栏链接占据了整个按钮

Question

在侧边栏中，它有一个元素列表，每个元素都是指向另一个页面的链接，我希望每个元素的整个矩形都是可点击的，而现在你只能点击链接本身(所以如果你将鼠标悬停在链接旁边或单击链接旁边的空白处，没有任何反应)。

<!-- sidebar -->
<div id="sidebar-col" class="col-sm-2">
  <div id="sidebar-div" class="affix-top" data-spy="affix">
    {% if math_problem_list %}
      <ul class="list-group">
      {% for math_problem in math_problem_list %}
        {% if math_problem.is_fully_answered %}
          <li class="list-group-item"><a href="{% url 'math_problem_blog_app:detail' math_problem.id %}">{{math_problem.title}}</a></li>
        {% endif %}
      {% endfor %}
      </ul>
    {% else %}
      <p>No fully answered math problems exist.</p>
    {% endif %}
  </div>
</div>

我正在使用 Bootstrap 3.3.5 并制作 Django 应用。

Answer 1

anchor 元素默认是内联元素。 因此，只需将以下规则添加到您的 CSS 中即可增加示例中 anchor 元素的可点击区域。

.list-group-item {
  padding: 0;
}

.list-group-item a {
  display: block;
  padding: 10px 15px;
}