具有多列显示的引导弹出窗口未扩展到宽度答案

【问题标题】：Bootstrap Popover With Multicolumn Display Not Expanding to Width具有多列显示的引导弹出窗口未扩展到宽度
【发布时间】：2014-08-04 20:41:53
【问题描述】：

Bootply is here

我正在尝试在引导弹出窗口中使用多列显示，并且内容似乎一直在尝试适应弹出窗口，而不是相反。我已经对 width 和 max-width 属性感到困惑，但无济于事。最大的问题在字段集图例（最后一个被切断的位置）和字段标签中（在 bootply 中）是显而易见的，它们正在换行，而不是弹出框变大以容纳它们。

为什么弹出框不展开？我曾经有另一列，我删除了它以获得更多空间，而不是弹出框缩小到新内容。

【问题讨论】：

bootply.com/SKLpcPWQeD 固定格式。另外，为了澄清：您希望弹出框不有一个水平滚动条，并且所有内容都可以放入其中吗？

标签： twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

如果我正确理解您的问题，您不喜欢弹出框有一个从边缘（水平）滚动的列。问题是您没有将所有行和列都放在容器内：

代码（弹出框的数据内容）：

<div class='container-fluid'>
....
</div>

CSS：更改了max-width 并删除了width:auto

 .popover {
  max-width: 100%;

  overflow-y:auto;
  z-index:1000;
}

BOOTPLY DEMO

Bootstrap 需要containers 将网格系统包裹在一起，否则将无法正确格式化。

如果您想摆脱水平滚动条，请删除 overflow-y:auto; CSS。 - 谢谢肖恩·泰勒

【讨论】：

排序。查看您的引导程序，弹出框不会剪辑最后一个字段集图例，但它仍然没有扩展，因此每列内的标签都是单行的（看看“Est. Condition”）。弹出框仍然从某个地方获得它的宽度，并且某个地方似乎不是它的内容
@ABMagil 我重新格式化了它，这是你要找的吗？ bootply.com/0auVNPChvH
好多了。你做了什么改变？你是不是直接给每个<td>设置了宽度？
@ABMagil 我将 max width 更改为 100% 并删除了 width:auto 并正确格式化了您的代码。容器是您最大的问题。
忘记我的回答，这比一英里好。此外，如果你删除“overflow-y:auto”，你会得到你的 V 形并失去 H 滚动条（它显示是因为 V 形结束在弹出框内）。

【解决方案2】：

我知道这不是您所问的（“为什么我的弹出框不展开”），但它确实解决了溢出问题...只需将其添加到您的 CSS：

.panel-legend{font-size:16px;}

【讨论】：

【解决方案3】：

我注意到 .popover 类在 bootstrap.min.css 中被限制为 max-width:276px;。当您检查元素（在 Google chrome 中）时，您可以看到这一点。我把我的意思截图了。

截图链接：http://i.imgur.com/En9tgVN.png

如果您可以取消最大宽度限制，您可以将.popover 的宽度设置为 100%。

希望对你有所帮助:)

编辑###

如果你改变了

.popover {
    max-width: 100%;

    overflow-y:auto;
    z-index:1000;
}

收件人：

.popover {
  max-width: 100%;
  z-index:1000;
}

.row {
   max-width:100%;
}

它应该工作:)

【讨论】：

如果您查看提供的 bootply，您会看到 max-width 已被覆盖为 800px。打开 DevTools 会显示现有 popover 的宽度已经大于 276px