有<a> tag only clickable when the screen is wider than 992px</a>的Div

Question

对于学校的可交付成果，我需要制作一个水平条形图，其中包含每个条形图的描述。这是我在完成codecadamy课程后创建的第一个HTML / CSS。到目前为止，我已经能够通过查看codepen，w3schools，stackoverflow等上的内容来弄清楚所有内容。但最后一部分是踢我的屁股，我无法弄明白。

我有两个布局：

• 对于宽度超过1240px的屏幕，图表和描述彼此相邻，

• 用于较窄屏幕的图表和描述

我通过在Bootstrap中创建两列并为容器提供两个固定大小来实现此目的。这在宽度超过992像素的屏幕上效果很好，但在小于此的屏幕上，链接不再起作用。使用Chrome开发者工具的一些侦探工作表明，这与浮动：左侧是由bootstrap.css中的@media（min-width：992px）启用的。在较宽的屏幕上禁用浮动会再次破坏链接，但是启用窄屏幕并不能解决它们，所以我不确定它是如何相关的。

以下是页面：http://tijmen.kervers.nl/B1.2/competencies.html

我认为这些是我需要提出的问题：

为什么链接仅在float：left启用时才起作用？

如果我未提供必要的信息，请提前告知我们！

Answer 1

使用Bootstrap的课程#bars在您的第一个clearfix添加一个clearfix，然后再次点击它。

---

要理解这一点：

如果没有clearfix，您的阻止#bars没有高度，第二个.col-md-6重叠。因此链接无法点击：

使用clearfix，您的块#bars将清除第二个col的浮动，并且其高度由其内容定义。因此，它的内容被带回到前面，并且可点击：