时间戳

首页 > 解决方案 > 无法在引导程序中的流体容器中的单独行中添加两行

html - 无法在引导程序中的流体容器中的单独行中添加两行

问题描述

我想要一个容器流体中的两行，但是这两行都被包裹在我不想要的一行中。我想要第一排下面的第二排。这是我的代码

<div class="container-fluid">
  <div class="row d-flex flex-row justify-content-center gx-5">
    <div data-aos="fade-left" data-aos-delay="1500">
      <div class="col-sm col-md p-3">
        <a class="shadow btn1" href="#">Work</a>
      </div>
    </div>
    <div data-aos="fade-down" data-aos-delay="1500">
      <div class="col-sm col-md p-3">
        <a class="shadow btn1" href="#">About</a>
      </div>
    </div>
    <div data-aos="fade-up" data-aos-delay="1500">
      <div class="col-sm col-md p-3">
        <a class="shadow btn1" href="#">Contact</a>
      </div>
    </div>
  </div>
  <div class="row d-flex flex-row justify-content-center gx-5">
    <div class="col-sm-12 col-xl-6 p-3">
      <img class="w-100" src="https://source.unsplash.com/3000x1000/?nature,beaches">
    </div>
    <div class="col-sm col-md p-3">
      213333333333
    </div>
  </div>
</div>

这就是我想要的样子

标签： htmlcsstwitter-bootstrap

解决方案

删除 d-flex 和 flex-row

<div class="container-fluid">
  <div class="row justify-content-center gx-5">
    <div data-aos="fade-left" data-aos-delay="1500">
      <div class="col-sm col-md p-3">
        <a class="shadow btn1" href="#">Work</a>
      </div>
    </div>
    <div data-aos="fade-down" data-aos-delay="1500">
      <div class="col-sm col-md p-3">
        <a class="shadow btn1" href="#">About</a>
      </div>
    </div>
    <div data-aos="fade-up" data-aos-delay="1500">
      <div class="col-sm col-md p-3">
        <a class="shadow btn1" href="#">Contact</a>
      </div>
    </div>
  </div>
  <div class="row justify-content-center gx-5">
    <div class="col-sm-12 col-xl-6 p-3">
      <img class="w-100" src="https://source.unsplash.com/3000x1000/?nature,beaches">
    </div>
    <div class="col-sm col-md p-3">
      213333333333
    </div>
  </div>
</div>

推荐阅读