Bootstrap 3选项菜单消失 [英] Bootstrap 3 Options Menu Disappears

问题描述

我有一张使用Bootstrap 3网格系统的4列表格。我使用 col-md - * 来代替使用 col-xs - * 。原因很简单 - 在手机上，我不希望图标缩小非常小，并希望它们在手机上更大并且可见。当我从这些列切换 col-xs - * 到 col-md - * 时，手机会自动堆叠在网格中的图标，并保持它们大 - 这正是我想要的。

I have a table of 4 columns using the Bootstrap 3 grid system. Instead of using the col-xs-*, which works great on mobile, I used the col-md-*. The reason was simple -- on mobile, I didn't want the icons to shrink down very small and wanted them larger and visible on mobile. When I switched from col-xs-* to col-md-* for these columns, the mobile would automatically stack the icons in the grid and keep them large -- which is exactly what I want.

好吧，一切都很好，除非这使得文档宽度得到搞乱了，选项菜单（移动设备/平板电脑的三栏弹出菜单）消失，因为它与文档宽度对齐，而不是视口宽度

Okay, all is well except that somehow this makes the document width get messed up, and the Options Menu (the three-bar popdown menu for mobiles/tablets) disappears because it's aligned to the document width, not the viewport width.

有没有人知道一个很好的CSS解决这个常见问题的方法？

Does anyone know a good CSS fix for that common problem?

推荐答案

我的问题。这不是因为响应式栏目。这是因为在我的响应式列中，我在相对容器中进行了绝对定位，因此我的 P 标签将对齐框的底部，但是我的文本不是'所以我申请了这个：

I found the cause of my problem. It wasn't because of the responsive columns. It was because inside my responsive columns, I was doing absolute positioning in a relative container so that my P tag would align to the bottom of a box, but then my text wasn't centered, so I applied this:

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

当我这样做时，它导致选项菜单跳出屏幕。修正是我左右切换，如下所示：

When I did that, it caused the options menu to jump off screen. The fix was that I switched the left and right like so:

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

这将P标签文本置于响应列中，但仍然允许我在设置为位置：相对的网格框中使用绝对定位。这导致文档宽度再次正常工作，因此选项菜单重新出现。

This centered that P tag text inside the responsive columns, but yet still allowed me to use absolute positioning inside a box of the grid that was set to position:relative. This caused the document width to act normal again and thus the Options Menu reappeared.

这篇关于Bootstrap 3选项菜单消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！