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

Question

我正在尝试使用bootstrap设计响应式网页。我有以下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.well内的div.col-lg-4定位。因此，当我向style="position:fixed;"添加div.well时，它从父节点继承的默认响应宽度（即33.33％）会减少，并且表单元素会缩小。关于我如何解决这个问题的任何建议？

Answer 1

看看this Codepen。

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

希望有所帮助。