Question

Bootstrap的container具有很好的内置断点，可以缩放div以匹配页面的宽度。但是在我的页面上，我有一个位于页面一侧的绝对定位div。容器没有考虑这个绝对定位的div，并且一直扩展到div之下（除非浏览器的宽度非常大）。

我怎么能告诉Bootstrap的容器只考虑一定百分比的浏览器宽度来容纳我的绝对div，同时仍然有响应？将容器放在一个较小的div中会破坏Bootstrap的网格布局，容器不再响应。

示例：

好：浏览器足够宽，静态div正确位于右侧

Good example

错误：容器遇到了几个断点并缩小了。静态div现在超过了容器。

Bad example

Answer 1

容器调整大小以适合其容器。假设您在body标签中使用容器。将padding-right添加到与绝对框大小相同的body标记。

<body style="padding-right: {your_absolute_box_size}px;">

or

body { padding-right: {your_absolute_box_size}px; }