列表项中的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中添加以下规则，即可增加示例中锚元素的可点击区域。

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

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