调整浏览器大小时,引导程序中的容器类始终侧重于左侧的第一列

在调整浏览器大小时,引导程序中的容器类始终集中在左侧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,0.78),rgba(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>
ABCEFGOPQ 回答:调整浏览器大小时,引导程序中的容器类始终侧重于左侧的第一列

使用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,以将其恢复为正常的内容流。

本文链接:https://www.f2er.com/3100013.html

大家都在问