Twitter bootstrap 引导：如何在不破坏布局的情况下修复col

我有3列布局，当所有列都可滚动时，它工作正常。 但如果我想把左边和右边的固定在顶部，我的布局就会中断

我看过很多帖子，但似乎都不管用：

我试过这样做，但当我将左列和右列设置为固定时，我的3列布局消失了：

<div class="container">
  <div class="row  "  style="margin-top:70px" >
    <div class="col-sm-3 " style="position: fixed !important; "   > 

        <div class="card   ">

          <!--Card image-->
          <div class="view overlay">
            <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%287%29.jpg" class="img-fluid" alt="">
            <a href="#">
              <div class="mask rgba-white-slight"></div>
            </a>
          </div>

          <!--Card content-->
          <div class="card-body">
            <!--Title-->
            <h4 class="card-title">Card title</h4>
            <!--Text-->
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
              content.</p>
            <a href="#" class="btn btn-primary">Button</a>
          </div>

        </div>


    </div>


    <div class="col-sm-6  " > 
        <div class="card  ">

          <!--Card image-->
          <div class="view overlay">
            <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%287%29.jpg" class="img-fluid" alt="">
            <a href="#">
              <div class="mask rgba-white-slight"></div>
            </a>
          </div>

          <!--Card content-->
          <div class="card-body">
            <!--Title-->
            <h4 class="card-title">Card title</h4>
            <!--Text-->
            <p class="card-text">Top #1 to build on the card title and make up the bulk of the card's
              content.</p>
            <a href="#" class="btn btn-primary">Button</a>
          </div>

        </div>
        <br/>

        <div class="card   ">

          <!--Card image-->
          <div class="view overlay">
            <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%287%29.jpg" class="img-fluid" alt="">
            <a href="#">
              <div class="mask rgba-white-slight"></div>
            </a>
          </div>

          <!--Card content-->
          <div class="card-body">
            <!--Title-->
            <h4 class="card-title">Card title</h4>
            <!--Text-->
            <p class="card-text">Top #2 to build on the card title and make up the bulk of the card's
              content.</p>
            <a href="#" class="btn btn-primary">Button</a>
          </div>

        </div>

    </div>



    <div class="col-sm-3 " style="position: fixed !important; "   > 
        <div class="card  ">
          <div class="view overlay">
            <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%287%29.jpg" class="img-fluid" alt="">
            <a href="#">
              <div class="mask rgba-white-slight"></div>
            </a>
          </div>

          <div class="card-body">
            <h4 class="card-title">Card title</h4>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
              content.</p>
            <a href="#" class="btn btn-primary">Button</a>
          </div>

        </div>


    </div>


  </div>
</div>

卡片标题
一些基于卡片标题的快速示例文本，构成了卡片的大部分内容
内容
卡片标题
Top#1以卡片标题为基础，构成卡片的大部分内容
内容


卡片标题
Top#2以卡片标题为基础，构成卡片的大部分内容
内容
卡片标题
一些基于卡片标题的快速示例文本，构成了卡片的大部分内容
内容

我希望左、右列固定（不可滚动），中央列可滚动

当我使用固定颜色时，我得到

没有固定列，我得到了预期的布局（但它不符合我的要求）

---

为什么div col-不强制其内部的所有内容遵循引导网格布局？

了解

位置：固定的
元素从正常DOM流中删除。这意味着
位置：固定的
元素不再相对于其父容器或同级元素定位

因此，中心柱必须从左侧偏移，因为最左侧的柱不再将其推向右侧。为此，您可以使用Bootstrap的
offset-sm-3
类

center

同样，必须将最右边的列推到右边。在本例中为9个单位，因为这是左栏和中栏的总宽度

右侧

此外，将固定列保留在
容器中也行不通，因为它们的宽度相对于整个视口宽度（而不是父容器宽度）。我建议使用
容器流体
，因为它与视口的宽度相同，并且允许列保持25%-75%-25%的宽度布局

固定位置演示：


另一个可能更简单的选项是在左右列上使用position:sticky。与
position:fixed
不同，粘性列将保留在DOM的正常流中。它们并不总是“固定”在页面上，但在滚动允许的情况下会显示为“固定”

粘性位置演示：


相关：
具有
位置的元素：已修复
在浏览器计算布局时不保留空间。如果希望滚动部分结束在其他元素未修复的情况下，则需要添加填充来说明这一点，或者使用偏移量类。或者使用
position:sticky
，这确实会在布局中得到考虑。谢谢Tieson，我尝试了
position:sticky
，但在这种情况下，所有的列都可以滚动。您可以对粘性边使用词缀也尝试了
词缀
，但所有内容都会滚动。我在问月亮吗？太棒了！谢谢你，齐姆。只需添加最后一点：如果我有两张牌（左或右列）叠在一起，下面的一张在上面的一张下面滚动。我如何保持卡的间隙，使它们不重叠？我不明白。如果它们都在
粘性顶部
分区中，则它们不应相互重叠。问题已解决，请接受答案。