Html 使用引导4调整窗口大小时移动div（垂直和水平）

CSS

HTML

左内容
标题2
正确的内容在这里

在全宽度上，我的页面布局如下所示：

[导航栏]
[1] [2][3]

在我之前的帖子中，我被告知要使用“order last order md first”，但这并不能真正帮助我，因为当我调整窗口大小时，我会得到如下结果：

[导航栏]
[2] [3][1]

我想要的效果是：

[导航栏]
[2] [3]

…[1]

（位于[3]下方的[1]div）

---

这在任何方面都是可以实现的吗？提前感谢。

为了达到您想要的效果，除了order类之外，您还需要offset类

但首先是列：

col-lg-3

--

col-lg-6

--

col-lg-3

在下面的代码中表示边栏列在较大屏幕上占3个单元，中间列占6个单元（总共12个）

在较小的屏幕（小于

lg

）上，中间的一栏获得8个单位（

col-8

），右边的一栏获得4个单位（

col-4

），总计再次达到12个单位

这就是为什么左列也必须有

col-4

，并且在较小屏幕上需要8个单位的偏移量，以便在较小屏幕上将其直接定位在右列下方

这就是为什么左列需要以下一组order和offset类：

订单最后一次订单lg第一次偏移-8偏移-lg-0

• order last

  是左列的默认顺序，即最小屏幕的顺序（Bootstrap 4为“mobile first”，因此最小屏幕优先）

• 先订购lg

  说：“从大屏幕（lg）到更高的屏幕，您先订购。”

• offset-8

  确定默认偏移量，即最小屏幕的偏移量

• offset-lg-0

  表示从大（lg）屏幕大小到更大屏幕大小，不应有偏移（零偏移）

以下是工作代码片段：

搜寻
1.
左侧内容

左侧内容

左侧内容

2.
中心

中心

中心

3.
正确的内容

正确的内容

正确的内容

不过，您描述的div与您的代码不匹配。你的代码中没有3个div并排出现，是吗？是的，它们是。[左][主][右]全部位于一个父容器中。但是，我简化了代码，所以我确实记得您最后的建议（只是想让您知道，它确实很有用），不要将文本直接放入“row”类中。这个html只是从上一篇文章中复制过来的，因为主代码中的更改微不足道。在我添加任何内容之前，它工作得非常好。右边的div与中间div之间似乎有很大的距离。此外，整个容器本身有点太小。如何将其宽度更改为整个页面的90%？我试着添加另一个类，甚至设计容器div本身的样式，但这些似乎都不起作用！重要的事也没什么用。容器流体做的工作是100%宽度，但我不想让它那么大，我希望两边都有边距。嗯。。。这似乎是一系列需要解决的不同问题。请将每个新问题作为一个单独的问题发布，因为堆栈溢出规则不允许我们在一个问题中回答/提问多个问题（如果我们违反规则，监控此问题的人员可能会将其删除）。并确保在发布新问题时使用我的代码片段作为基础，因为他们总是希望看到问题附加的代码。

.main{
    border-radius: 20px;
    margin-left: 20px;
    margin-right: 20px
}

.left{
    max-width: 250px;
    height: 1%;
    border-radius: 20px;
}

.right{
    max-width: 250px;
    height: 1%;
    border-radius: 20px;    
}   

.parent-container {
    display: flex;
}

<div class="parent-container">
   <div class="container left">
       <div class="row">
           Left content
       </div>
   </div>

    <div class="container card main py-3">
        <div class="container card">
            <div class="card-body">
                <div class="row">
                    <div class="col-lg-12 text-center">
                        <h2>TITLE2</h2>
                    </div>
                </div>
            <div class="row">
                <div class="col-md-12 text-center">
                    <a href="#" class="link1">
                      <img src="2.jpg">
                        <h3>Title3</h3>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="container right">
        <div class="row">
            <div class="right-content">
               Right content here
            </div>
       </div>       
   </div>
</div>