css - 调整浏览器大小时，引导程序中的容器类始终关注左侧的第一列

Question

class="col-lg-3"调整浏览器大小时，引导程序中的容器类始终关注左侧的第一列。它怎么能专注于中间列col-lg-6呢？

调整大小之前：

调整大小后：

Bootstrap 代码的第一部分：

   <section class="newsfeed">
    <div class="container-fluid">
     <div class="row">
      <div class="col-lg-3">

     <a href="#">
     <div class="storybox" 
       style="background: linear-gradient( rgba(34,34,34,0.78), rgba(34,34,34,0.78)), url('assets/img/posts/2.gif') no-repeat;
              background-size: cover;
                  background-position: center center;
                  -webkit-background-size: cover;
                  -moz-background-size: cover;
                  -o-background-size: cover;">
          <div class="story-body text-center">
           <div class=""><img class="img-circle" src="assets/img/users/10.jpg" alt="user"></div>
           <h4>Clifford Graham</h4>
           <p>2 hours ago</p>
          </div>      
     </div>
     </a>

标签： csstwitter-bootstrapbootstrap-4

Answer 1

使用 Bootstrap 内置的 flex-box order 实用程序来调整内容的顺序： https ://getbootstrap.com/docs/4.3/utilities/flex/#order

通过将 order-first 类添加到列容器（在您的示例中将其添加到 col-lg-6 ），它将按顺序首先移动。然后，您可以使用 order-md-0、order-lg-0 或 order-xl-0 到同一容器，根据您需要的设备大小将其移回正常的内容流。

order-first 实用程序类通过将 CSS 属性 order 设置为 -1 来工作，order-0 会将 order 属性重置为其默认值 0 以将其返回到正常的内容流。