Bootstrap - 为什么固定定位的 div 的宽度会减小？

Question

我正在尝试使用引导程序设计一个响应式网页。我有以下 HTML 结构

<div class="container">
    <div class="row">
        <div class="col-lg-8 col-sm-8">
            <div class="well"><!--Page content here--></div>
        </div>
        <div class="col-lg-4 col-sm-4">
            <div class="well">
                <form class="form-horizontal" role="form">
                    <!--Form elements here-->
                </form>
            </div>
        </div>
    </div>
</div>

现在，我希望将 div.col-lg-4 内的 div.well 固定定位。因此，当我将 style="position:fixed;" 添加到 div.well 时，它从其父级继承的默认响应宽度（即 33.33%）会减小并且表单元素会缩小。有关如何解决此问题的任何建议？

Answer 1

看看this Codepen。

在 CSS Box Model 中，fixed 定位将一个元素从正常流中取出，如果没有其他兄弟元素，则父容器会崩溃。在这种情况下，表单从父表单继承它的宽度，但是当使用fixed 定位从正常流程中取出时，父表单的width 值不会级联。但是当我添加一个兄弟元素来说明我的观点时，在本例中是一个 Bootstrap 'jumbotron' 元素，你会看到父元素 .col-lg-4 .col-sm-4 再次可见，但它位于它的下方 fixed 兄弟元素首先出现按源顺序。

希望对您有所帮助。