Css Bootstrap 5 更改列顺序时出现问题

发布于12月22日

我正在升级到Bootstrap 5，无法将列重新排序为我想要的行为.我有3栏:标题、图片和一段文字.在较大的屏幕上，我希望图像在左边，标题在右边，文本的段落在标题的正下方.在较小的屏幕上，我希望三列垂直堆叠在标题，图像，文本段落的顺序.使用.Order我基本上可以让事情按我想要的方式工作，除了在大屏幕上我不能让文本的段落直接显示在标题下面，而是显示在标题下面，但在图片下面，尽管在右边.我如何才能将图片旁边的这第三列推到标题的正下方？

到目前为止，我的代码如下:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-xxl-8 col-xl-8 col-lg-8 order-1 order-lg-2">
      <div align="justify">
        <p>title</p>
      </div>
    </div>

    <div class="col-xxl-4 col-xl-4 col-lg-4 order-2 order-lg-1">
      <div><img src="image.jpg" width="200" height="300"></div>
    </div>

    <div class="col-xxl-8 col-xl-8 col-lg-8 order-3 order-lg-3 ms-auto">
      <div align="justify">
        <p>lorem ipsum</p>
      </div>
    </div>
  </div>
</div>

选项1-仅添加1行和一些显示类

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-xxl-8 col-xl-8 col-lg-8 order-1 order-lg-2">
      <div align="justify">
        <p>title</p>
        <!--------------------->
        <!-- ADDED this line -->
        <!--------------------->
        <p class="d-none d-lg-block">lorem ipsum</p>
      </div>
    </div>

    <div class="col-xxl-4 col-xl-4 col-lg-4 order-2 order-lg-1">
      <div><img src="image.jpg" width="200" height="300"></div>
    </div>
    <!--------------------- ADDED d-lg-none -------------------------->
    <div class="col-xxl-8 col-xl-8 col-lg-8 order-3 d-lg-none ms-auto">
      <div align="justify">
        <p>lorem ipsum</p>
      </div>
    </div>
    
  </div>
</div>

选项2-仅添加1个区块和一些显示类

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-xxl-8 col-xl-8 col-lg-8 order-1 d-lg-none">
      <div align="justify">
        <p>title</p>
      </div>
    </div>

    <div class="col-xxl-4 col-xl-4 col-lg-4 order-2 order-lg-1">
      <div><img src="image.jpg" width="200" height="300"></div>
    </div>

    <div class="col-xxl-8 col-xl-8 col-lg-8 order-3 d-lg-none ms-auto">
      <div align="justify">
        <p>lorem ipsum</p>
      </div>
    </div>
    
    <!-- ADDED block -->
    <div class="col-xxl-8 col-xl-8 col-lg-8 order-4 order-lg-2 d-none d-lg-block">
      <div align="justify">
        <p>title</p>
        <p>lorem ipsum</p>
      </div>
    </div>
    
  </div>
</div>

选项3--显示网格

@media (min-width: 992px){
  .grid-temp-1{
     grid-template: "a b" 0fr
                    "a c" 1fr
                    "a c" 1em / 33% 1fr;
  }
  .grid-temp-1 > div:nth-child(1) {
    grid-area: b;
  }
  .grid-temp-1 > div:nth-child(2) {
    grid-area: a;
  }
  .grid-temp-1 > div:nth-child(3) {
    grid-area: c;
  }
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="container">
  <div class="row d-lg-grid grid-temp-1">
    <div class="">
      <div align="justify">
        <p>title</p>
      </div>
    </div>

    <div class="">
      <div><img src="image.jpg" width="200" height="300"></div>
    </div>

    <div class="ms-auto">
      <div align="justify">
        <p>lorem ipsum</p>
      </div>
    </div>
  </div>
</div>

Css Bootstrap 5 更改列顺序时出现问题

推荐答案

选项1-仅添加1行和一些显示类

选项2-仅添加1个区块和一些显示类

选项3--显示网格

Css相关问答推荐

Css-如何隐藏WP管理菜单上没有css类的第4<；li&>

使用高图的背景大小渐变

如果一个类紧挨着另一个具有特定类的元素，请使用特殊的CSS，只使用不带JS的CSS

如何让 v-col 变成可滚动的？

如何使shiny 的showNotification可滚动？

禁用MUI DataGrid上的悬停效果

为什么所有选项卡都没有显示在 React 的 MUI 选项卡组件中？

父母是内联块，子元素有％填充=奇怪的行为

Tailwind：如何设置网格的自动填充？

关键帧不能动画回来

为什么我的 CSS 需要一个它似乎不需要的大括号？

有条件地覆盖 CSS 中的 AntD Select 样式

css3比例周围的空白

CSS nth-child 表示大于和小于

将一行文本保留为单行 - 换行或不换行

固定元素在 Chrome 中消失

CSS：固定到底部并居中

将文本放在 div 的底部

调用转发到 JSP 的 Servlet 时，浏览器无法访问/查找相关资源，如 CSS、图像和链接

堆叠半透明盒子的 colored颜色取决于订单？