Question

我具有3-col布局，并且当所有col都可滚动时，它可以正常工作。但是，如果我想将左右两边固定在顶部，我的布局就会中断。

我看过很多帖子，但似乎没有任何效果： How to disable vertical scroll in bootstrap column

我尝试过此方法，但是当我将left和right cols设置为固定时，我的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>

我希望左，右行固定（不可滚动），而中心行可滚动。

使用固定col时，我得到wrong layout

如果没有固定col，我将获得预期的布局（但不符合我的要求）layout-ok

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

Answer 1

了解到position:fixed元素已从常规DOM流中删除。这意味着 position:fixed元素不再相对于其父容器或同级元素定位。

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

<div class="col-sm-6 offset-sm-3">center</div>

同样，必须将最右边的列推到右边。在这种情况下，这是9个单位，因为这是左列和中间列的总宽度。

<div class="col-sm-3 offset-sm-9">right</div>

此外，将固定的列保持在container中将不起作用，因为它们的宽度是相对于整个视口宽度（而不是父容器宽度）的。我建议使用container-fluid，因为它的宽度与视口相同，并且允许列保留25％-75％-25％的宽度。

固定位置演示：https://www.codeply.com/go/IyYNYLKQBr

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

粘性位置演示：https://www.codeply.com/go/vxpLuKAu4m

Bootstrap：如何在不破坏布局的情况下进行固定col

1 个答案: