时间戳

首页 > 解决方案 > Bootstrap 嵌套布局（一列 2 列）

html - Bootstrap 嵌套布局（一列 2 列）

问题描述

我正在尝试在引导程序中布局一个网格，该网格包含在完整的 12 列布局的桌面上，其中有一个 8 列网格和一个 4 列网格。8 列网格用图像/文本填充，4 列网格由其自身的 2 个元素组成，这些元素彼此下方包含图像/文本。

在较小的断点上，布局应该简单地显示彼此下方相同大小的 3 个元素。

我摆弄了一下，但我没有让它工作。在下面，您还可以在 html 旁边找到我想要实现的草图。有什么提示吗？我不认为这对于 bootstrap 4 来说是开箱即用的。

    <section>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="row">
                    <div class="col-md-8">
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui illo eaque libero, modi
                            porro iusto magni sint laboriosam eius. Fugiat non ad pariatur sit libero optio
                            doloremque molestiae harum! Rem!</p>
                    </div>
                    <div class="col-md-4">
                        <div class="row">

                            <div class="col-md-12">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo
                                ratione blanditiis tempore tempora non. Neque adipisci maxime aspernatur voluptate
                                sunt non totam, temporibus provident necessitatibus distinctio impedit nobis aut at!
                            </div>
                            <div class="col-md-12">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo
                                ratione blanditiis tempore tempora non. Neque adipisci maxime aspernatur voluptate
                                sunt non totam, temporibus provident necessitatibus distinctio impedit nobis aut at!
                            </div>
                        </div>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui illo eaque libero, modi
                            porro iusto magni sint laboriosam eius. Fugiat non ad pariatur sit libero optio
                            doloremque molestiae harum! Rem!</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

作为草图，它看起来像这样：

在此处输入图像描述

标签： htmlcssbootstrap-4

解决方案

您需要指定较小的 col 宽度。你还有一个额外的不必要的行和 col 包装它。以下是您正在寻找的工作示例。col-12为任何小于 md 的屏幕添加了类

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-12 col-md-8">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui illo eaque libero, modi porro iusto magni sint laboriosam eius. Fugiat non ad pariatur sit libero optio doloremque molestiae harum! Rem!</p>
    </div>
    <div class="col-12 col-md-4">
      <div class="row">
        <div class="col-12">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo ratione blanditiis tempore tempora non. Neque adipisci maxime aspernatur voluptate sunt non totam, temporibus provident necessitatibus distinctio impedit nobis aut at!
        </div>
        <div class="col-12">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo ratione blanditiis tempore tempora non. Neque adipisci maxime aspernatur voluptate sunt non totam, temporibus provident necessitatibus distinctio impedit nobis aut at!
        </div>
      </div>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui illo eaque libero, modi porro iusto magni sint laboriosam eius. Fugiat non ad pariatur sit libero optio doloremque molestiae harum! Rem!</p>
    </div>
  </div>
</div>

推荐阅读