【问题标题】：Bootstrap 3 Options Menu DisappearsBootstrap 3 选项菜单消失
【发布时间】：2016-09-07 08:53:43
【问题描述】：
我有一个使用 Bootstrap 3 网格系统的 4 列表格。我没有使用在移动设备上运行良好的col-xs-*，而是使用了col-md-*。原因很简单——在移动设备上，我不希望图标缩小得非常小，而是希望它们在移动设备上更大且可见。当我将这些列从col-xs-* 切换到col-md-* 时，移动设备会自动将图标堆叠在网格中并保持较大——这正是我想要的。
好的，一切都很好，除了不知何故这会使文档宽度变得混乱，并且选项菜单（用于手机/平板电脑的三栏弹出菜单）消失了因为它是对齐的到文档宽度，而不是视口宽度。
有人知道针对该常见问题的良好 CSS 修复方法吗？
【问题讨论】：
标签：
html
css
twitter-bootstrap
mobile
options-menu
【解决方案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 的网格框中使用绝对定位。这导致文档宽度再次正常，因此选项菜单重新出现。