Bootstrap 3 选项菜单消失

Question

我有一个 table 的 4 列，使用 Bootstrap 3 网格系统。我没有使用在移动设备上效果很好的 col-xs-*，而是使用了 col-md-*。原因很简单——在移动设备上，我不希望图标缩小得非常小，而是希望它们更大并且在移动设备上可见。当我将这些列从 col-xs-* 切换到 col-md-* 时，移动设备会自动将图标堆叠在网格中并使它们变大——这正是我想要的。

好的，一切都很好，除了不知何故 这使得文档宽度变得混乱，以及选项菜单（mobiles/tablets 的三栏弹出菜单）消失 因为它与文档宽度对齐，而不是视口宽度。

有谁知道 CSS 解决这个常见问题的好办法吗？

Answer 1

我找到了问题的原因。这不是因为响应列。这是因为在我的响应列中，我在相对容器中进行绝对定位，这样我的 P 标签就会与框的底部对齐，但是我的文本没有居中，所以我应用了这个：

.box P
{
position:absolute;
bottom:5px;
left:-50%;
right:-50%;
}

当我这样做时，它导致选项菜单跳出屏幕。解决方法是我像这样切换左右：

.box P
{
position: absolute;
bottom: 5px;
left:0;
right:0;
}

这使响应列中的 P 标记文本居中，但仍然允许我在设置为 position:relative 的网格框内使用绝对定位。这导致文档宽度再次正常运行，因此选项菜单重新出现。