只有 1 列滚动，其余的在 Bootstrap 4.5 上是粘性的

Question

我想要一个 Navbar 和 3 列布局，其中只有中心列滚动，其余列留在屏幕上。 （导航和左右栏是粘性的）左右栏也应该在移动设备上折叠（他们这样做）

这是我的

<nav> //lots of stuff here </nav>

<div class="container-fluid">

    <div class ="row">

         <div class ="col-md-2 sticky-top">
         </div>

         <div class ="col-md-8">
         //this should be the scrollable column.
         </div>

         <div class ="col-md-2 sticky-top">
         </div>

    </div>

</div>

我一直在尝试 'sticky-top' bootstrap class 但没有成功。

Answer 1

您只需要将 sticky-top div 包裹在您的 col div

中

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<nav class="p-3"> //lots of stuff here </nav>

<div class="container-fluid">

  <div class="row">

    <div class="col-md-2">
      <div class="sticky-top">
        Fixed content //this should be the scrollable column. Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam molestiae alias nemo delectus adipisci iem ipsum dolor sit amet consectetur adipisicing elit. At vero vitae rem quaerat quod reiciendis
        expedita itaque ipsum unde magnam nisi laudantium cumque cupiditate aspernatur, provident dicta, dolorum sed dignissimos.
      </div>
    </div>

    <div class="col-md-8">
      //this should be the scrollable column. Lorem ipsum dolor sit amet consectetur adipisicing itaque ipsum unde magnam nisi laudantium cumque cupiditate aspernatur, provident dicta, dolorum sed dignissimos. r rerum quasi odit debitis. Quo blanditiis perferendis
      animi pariatur quod! Odit, exercitationem odio. Lorem ipsum dolor sit amet consectetur adipisicing elit. At vero vitae rem quaerat quod reiciendis expedita itaque ipsum unde magnam nisi laudantium cumque cupiditate aspernatur, provident dicta, dolorum
      sed dignissimos. //this should be the scrollable column. Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam molestiae alias nemo delectus adipisci ipsum placeat quo obcaecati quia blanditiis ad quis itaque sit enim impedit illo, veniam
      eos dignissimos? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat exercitationem laboriosam expedita, odio perferendis explicabo obcaecati pariatur rerum quasi odit debitis. Quo blanditiis perferendis animi pariatur quod! Odit, exercitationem
      odio. Lorem ipsum dolor sit amet consectetur adipisicing elit. At vero vitae rem quaerat quod reiciendis expedita itaque ipsum unde magnam nisi laudantium cumque cupiditate aspernatur, provident dicta, dolorum sed dignissimos. //this should be the
      scrollable column. Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam molestiae alias nemo delectus adipisci ipsum placeat quo obcaecati quia blanditiis ad quis itaque sit enim impedit illo, veniam eos dignissimos? Lorem ipsum dolor
      sit amet consectetur adipisicing elit. Quaerat exercitationem laboriosam expedita, odio perferendis explicabo obcaecati pariatur rerum quasi odit debitis. Quo blanditiis perferendis animi pariatur quod! Odit, exercitationem odio. Lorem ipsum dolor
      sit amet consectetur adipisicing elit. At vero vitae rem quaerat quod reiciendis expedita itaque ipsum unde magnam nisi laudantium cumque cupiditate aspernatur, provident dicta, dolorum sed dignissimos. //this should be the scrollable column. Lorem
      ipsum dolor sit amet consectetur adipisicing elit. Numquam molestiae alias nemo delectus adipisci ipsum placeat quo obcaecati quia blanditiis ad quis itaque sit enim impedit illo, veniam eos dignissimos? Lorem ipsum dolor sit amet consectetur adipisicing
      elit. Quaerat exercitationem laboriosam expedita, odio perferendis explicabo obcaecati pariatur rerum quasi odit debitis. Quo blanditiis perferendis animi pariatur quod! Odit, exercitationem odio. Lorem ipsum dolor sit amet consectetur adipisicing
      elit. At vero vitae rem quaerat quod reiciendis expedita itaque ipsum unde magnam nisi laudantium cumque cupiditate aspernatur, provident dicta, dolorum sed dignissimos. //this should be the scrollable column. Lorem ipsum dolor sit amet consectetur
      adipisicing elit. Numquam molestiae alias nemo delectus adipisci ipsum placeat quo obcaecati quia blanditiis ad quis itaque sit enim impedit illo, veniam eos dignissimos? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat exercitationem
      laboriosam expedita, odio perferendis explicabo obcaecati pariatur rerum quasi odit debitis. Quo blanditiis perferendis animi pariatur quod! Odit, exercitationem odio. Lorem ipsum dolor sit amet consectetur adipisicing elit. At vero vitae rem quaerat
      quod reiciendis expedita itaque ipsum unde magnam nisi laudantium cumque cupiditate aspernatur, provident dicta, dolorum sed dignissimos. //this should be the scrollable column. Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam molestiae
      alias nemo delectus adipisci ipsum placeat quo obcaecati quia blanditiis ad quis itaque sit enim impedit illo, veniam eos dignissimos? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat exercitationem laboriosam expedita, odio perferendis
      explicabo obcaecati pariatur rerum quasi odit debitis. Quo blanditiis perferendis animi pariatur quod! Odit, exercitationem odio. Lorem ipsum dolor sit amet consectetur adipisicing elit. At vero vitae rem quaerat quod reiciendis expedita itaque
      ipsum unde magnam nisi laudantium cumque cupiditate aspernatur, provident dicta, dolorum sed dignissimos. //this should be the scrollable column. Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam molestiae alias nemo delectus adipisci
      ipsum placeat quo obcaecati quia blanditiis ad quis itaque sit enim impedit illo, veniam eos dignissimos? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat exercitationem laboriosam expedita, odio perferendis explicabo obcaecati pariatur
      rerum quasi odit debitis. Quo blanditiis perferendis animi pariatur quod! Odit, exercitationem odio. Lorem ipsum dolor sit amet consectetur adipisicing elit. At vero vitae rem quaerat quod reiciendis expedita itaque ipsum unde magnam nisi laudantium
      cumque cupiditate aspernatur, provident dicta, dolorum sed dignissimos.
    </div>

    <div class="col-md-2 ">
      <div class="sticky-top">
        Fixed content //this should be the scrollable column. Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam molestiae alias nemo delectus adipisci iem ipsum dolor sit amet consectetur adipisicing elit. At vero vitae rem quaerat quod reiciendis
        expedita itaque ipsum unde magnam nisi laudantium cumque cupiditate aspernatur, provident dicta, dolorum sed dignissimos.
      </div>

    </div>

  </div>

</div>