css Bootstrap 5 -更改列顺序问题

kh212irz 于 2022-12-24 发布在 Bootstrap

关注(0)|答案(2)|浏览(143)

我正在升级到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>

css

来源：https://stackoverflow.com/questions/74885141/bootstrap-5-problem-changing-column-order

2条答案

按热度按时间

j9per5c41#

基本上不可能只显示Flex和Order。
因此，您需要：

切换到网格
使用.d-{breakpoint}-{value}显示2个不同的块或线

Bootstrap 5 display doc
不同的选择，但第一个是最轻的：

选项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-显示网格

一个二个一个一个

赞(0）回复(0）举报 2022-12-24

34gzjxbg2#

使用两栏布局。你可以将标题和段落嵌套在一栏中。

<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>Hello World</p>
            </div>
            <div align="justify">
                <p>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.png" width="200" height="300"></div>
        </div>  
    </div>
</div>

赞(0）回复(0）举报 2022-12-24

我来回答

css Bootstrap 5 -更改列顺序问题

2条答案

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

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

选项3-显示网格

相关问题

热门标签

最新问答