时间戳

首页 > 解决方案 > 使用引导类在具有不同断点的同一行上设置图像和文本的顺序

html - 使用引导类在具有不同断点的同一行上设置图像和文本的顺序

问题描述

我在同一行中有一个图像和文本，图像在前，文本在其左侧。我想要做的是当屏幕缩小到小断点并且调整图像大小时返回到左侧时，使文本显示在图像上方。我在文本标签下方有图像标签。这是我的代码。

<div class="container-fluid">
  <div class="row">
    <div class="col-md-10 order-2 col-sm-10 order-1 flex-column">
      <h2>Alignment</h2>
      <p> Alignment helps organize and order the content, controlling how the eye flows from one 
          component to the next. It is the organization and creation of invisible lines. Without 
          alignment, users will have a hard time recognizing how elements relate to eachother, and 
          your page will look messy and disorganized.</p>
            </div>
        <div class="col-md-2 order-1 col-sm-2 order-2 flex-column">
            <img src="carp4.jpg" class="">
        </div>
    </div>
</div>

标签： htmlbootstrap-4

解决方案

您不需要将顺序从 1 反转到 2，因为两个断点以相同的顺序反转。如果需要，请在断点上切换它，例如order-1 order-sm-2.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-10 order-2">
            <h2>Alignment</h2>
            <p>Alignment helps organize and order the content, controlling how the eye flows from one component to the next. It is the organization and creation of invisible lines. Without alignment, users will have a hard time recognizing how elements relate to eachother, and your page will look messy and disorganized.</p>
        </div>
        <div class="col-sm-2 order-1">
            <img src="https://picsum.photos/100/100" alt="" class="img-fluid w-100" />
        </div>
    </div>
</div>

您还可以flex-column-reverse用于超小屏幕和flex-sm-row-reverse小屏幕及以上。这样你就可以避免使用order-*. order-*在超过 2 列的情况下很方便。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid">
    <div class="row flex-column-reverse flex-sm-row-reverse">
        <div class="col-sm-10">
            <h2>Alignment</h2>
            <p>Alignment helps organize and order the content, controlling how the eye flows from one component to the next. It is the organization and creation of invisible lines. Without alignment, users will have a hard time recognizing how elements relate to eachother, and your page will look messy and disorganized.</p>
        </div>
        <div class="col-sm-2">
            <img src="https://picsum.photos/100/100" alt="" class="img-fluid w-100" />
        </div>
    </div>
</div>

但是，如果您可以切换图像和文本列，这似乎过于复杂。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-2">
            <img src="https://picsum.photos/150/100" alt="" class="img-fluid w-100" />
        </div>
        <div class="col-sm-10">
            <h2>Alignment</h2>
            <p>Alignment helps organize and order the content, controlling how the eye flows from one component to the next. It is the organization and creation of invisible lines. Without alignment, users will have a hard time recognizing how elements relate to eachother, and your page will look messy and disorganized.</p>
        </div>
    </div>
</div>

这是一个jsfiddle来调整结果大小并进行播放。

推荐阅读