当页面被压缩时，Bootstrap Top Glyph Link 将不起作用答案

【问题标题】：Bootstrap Top Glyph Link wont work when page is condensed当页面被压缩时，Bootstrap Top Glyph Link 将不起作用
【发布时间】：2016-03-15 03:10:22
【问题描述】：

所以这是一个非常奇怪的问题，我已经尝试搜索它，但老实说我不知道该搜索什么了。

我正在创建一个列出产品的网站，您可以将它们添加到您的愿望清单中。每次添加产品的链接（Hearts）都非常有效，除非页面被压缩以便只显示两列（或更少）。当页面压缩为两列时，顶部的心脏链接不起作用。奇怪的是，除了顶行的链接之外的所有其他链接都可以使用！由于某种原因，它似乎使顶部无法点击。另一件事是顶行上方和下方的所有导航和分页链接都可以正常工作。这是网站：http://timtroiano.com/chalk/。如果您需要我发布任何代码，请告诉我。任何帮助是极大的赞赏！

【问题讨论】：

你为什么不使用引导程序 row ？
而你不能点击它们的原因是因为在屏幕调整大小时，你所有的.col-md-4 div 的高度都减少到了 1px 并相互堆叠，最终重叠了一半项目在顶行。
感谢 cmets！删除 .col-md-4 有效，但现在我的列在容器中的间距不均匀。关于如何在不完全重做网格系统的情况下解决此问题的任何建议？

标签： jquery html css twitter-bootstrap hyperlink

【解决方案1】：

不是链接失效了，是里面有元素覆盖，你不能点击。

这里是有问题的代码：

bootstrap 正在中断，因为您使用的是全宽列，并且它们都堆叠在第一行的顶部，如下所示：

您需要重新考虑您对 html 的看法 - 每个项目不应该是它自己的列（并且它们不作为列起作用）。更不用说您使用的最大列宽超出了引导程序允许的范围 (12)。

它目前正在工作，因为您有 float 规则覆盖了列规则所做的事情，所以一个解决方案是从上面的每个 div 中完全删除 col-md-4 类。让我知道是否可以解决问题。

【讨论】：

啊，这很有道理，谢谢！我记得现在我这样做是为了让 img div 在整个身体容器中均匀分布。链接现在可以工作，但列都向左对齐，当您处于中间尺寸时，它看起来很奇怪。您对如何在不丢失功能的情况下保持均匀间距有任何想法吗？如果你刷新页面，你会看到我在说什么。
这是您想要使用行和引导的网格系统的地方。你之前有col-md-4，它允许每行3列，你也可以添加col-sm-6，这样在较小的屏幕尺寸下，每行有2列。 getbootstrap.com/css/#grid 对此有很好的概述，应该有你需要的一切。
哇，太棒了，我将您的答案标记为正确，因为您基本上涵盖了所有内容。我现在使用 'col-xs-12 col-sm-6 col-md-4' 从 3->2->1 开始。我唯一想补充的是，当它下降到一个时，我不确定如何将 div 在容器中居中。有任何想法吗？感谢大家的帮助！
耶！你应该使用margin: 0 auto作为div；如果您只想在特定屏幕宽度时将 div 居中，请使用媒体查询：developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/… 例如@media (max-width: 700px) { div {margin: 0 auto; } }