时间戳

首页 > 解决方案 > 我在为引导带中的嵌套列构建响应式布局时遇到问题

css - 我在为引导带中的嵌套列构建响应式布局时遇到问题

问题描述

我在 figma 上放置了以下布局：显示嵌套列图像的视口

到目前为止，我已经为布局设置了以下网格：

<div class="container-fluid"> 
  <div class="row" id="sobre-nos-wrapper">
      <div class="col">
        <div class="row">
          <div class="col">
            <h1>Title</h1>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="row">
          <div class="col">
            <p>
              Text 1
            </p>
          </div>
          <div class="col">
            <p>
             Text 2
            </p>
          </div>
          <div class="col">
            <p>
             text 3
            </p>
          </div>
          <div class="col-sm-12 col-md-4">
            <img class ="" src="" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

我希望我的特大号和大号（>= 992px）在一个视口中显示上面的设计，中号（>=678）只在一个整个视口中显示文本，小号和特小号（>576）显示整个视口中的所有元素（标题、单独的段落和图片）。任何帮助和/或建议将不胜感激！如果您需要任何进一步的信息，请告诉我。

标签： csstwitter-bootstrapbootstrap-4

解决方案

快速破解它。我希望这能让你指出正确的方向：

<div class="container-fluid"> 
         <div class="row" id="sobre-nos-wrapper">
             <div class="row">
                 <div class="col-sm-12">
                    <h1>Title</h1>
                 </div>
             </div>
             <div class="row">
            <div class="col-md-3">
                <p>Text 1</p>
          </div>
          <div class="col-md-3">
            <p>Text 2</p>
          </div>
          <div class="col-md-3">
            <p>text 3</p>
          </div>
          <div class="col-sm-12 col-md-3">
            <img class ="" src="" alt="">img
          </div>
        </div>
    </div>
  </div>
</div>

推荐阅读