Question

我想将引导列位置设置为固定（col-md-4）。这是一个商店，分为两列：

购物内容（非常长且可滚动）col-md-8
购物车内容（非常短且固定，因此当您滚动商店内容时，购物车内容始终可见）col-md-4

我不知道在bootstrap中这样做的正确方法是什么。

这是我预期的行为：http://image.noelshack.com/fichiers/2016/08/1456677164-neededbehavior.jpg

目前，我已尝试将col-md-4位置设置为固定为css属性，这种方式有效但不完全。

正如您在this picture中看到的那样，当我将col-md-4位置设置为固定时，其宽度（col-md-4为33％）比应有的宽。

实际上，col-md-4来自bootstrap的宽度为33％的css属性是从其父容器计算的。

但是当位置设置为固定时，由于某些原因，33％是根据屏幕视图宽度计算的。因此，如果分辨率宽度为2500px，则不会是容器1170px的33％，而是屏幕尺寸为2500px的33％。因此col-md-4比预期更宽，并且容器溢出。

我想我可以在javascript中重新计算正确的宽度，但我想知道在bootstrap中是否有正确的方法（我猜是这样）。

Answer 1

在这种特殊情况下，我不会使用Bootstrap col类。通过以下方式看起来会更好：

<div class="content"></div>
<div class="cart"></div>

.content {
    width: 100%;
    padding-right: 200px;
}

.cart {
    width: 200px;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 99;
}

Bootstrap很好，但不要忘记，col类是一个浮动的项目。在您的情况下，这种方法并不合适，因为您希望修复.cart侧边栏并且不遵守任何浮动规则。

Bootstrap fixed col-md-4

1 个答案: