Bootstrap container-fluid容器内两列未按预期左右对齐求解

布局失效来自两个核心问题：

1. 自定义样式.test-shine中写了display: inline-block属性，破坏了Bootstrap栅格列默认的flex布局规则，导致右侧列无法按照栅格逻辑分配宽度、自动撑满对应区域，会收缩到内容最小宽度，无法靠右侧对齐。
2. 原生栅格结构没有配置两端对齐规则，container-fluid默认带15px左右内边距、row默认带左右负边距，两个列也没有明确宽度分配，无法实现一左一右贴边的效果。

按以下步骤调整即可：

• 修正.test-shine自定义样式，删除破坏布局的display: inline-block属性，补充宽度适配规则，让它符合栅格列渲染要求：

.test-shine {
  background: url('https://i.pinimg.com/474x/01/88/dc/0188dc41881e0e410b5375cdead5f49a.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  height: 500px;
  overflow: hidden;
  width: 100%;
}

• 调整栅格容器类名：给row添加Bootstrap自带的justify-content-between类实现flex子元素两端对齐；如果需要完全贴浏览器边缘无留白，给container-fluid加px-0清除默认左右内边距、给row加mx-0清除默认左右负边距；同时给两个列配置响应式宽度占比（Bootstrap栅格总宽度为12份，可按需调整数值），避免自动宽度分配导致的错位。修正后的结构代码如下：

<div class="container-fluid px-0">
  <div class="firstSection">
    <div class="row mt-5 justify-content-between mx-0">
      <div class="col-12 col-md-5 firstBlockText">
        <h4> Welcom To DigitalGroup</h4>
        <h1>About Digital Group </h1>
        <div class="row-hr">
          <hr class="dot-hr">
          <hr>
        </div>
        <p> <b> </b>offering digital and technology
          investments that deliver sustainable growth yet place equal value on small and large
          enterprises.
          <br><br><br>
          <b>Since 2012,</b> we’re the creator company that produce digital segments. Our success has
          brought
          all the digital aspects into one template of DIGITAL GROUP, relying on a team of intelligent,
          experienced, and specialists in Digital Architecture, Digital Marketing, and Digital e-commerce.
        </p>
        <a class="btn btn-outline-dark btn-lg" data-aos="fade-up" data-aos-duration="900" href="about.html">
          Read more >>
        </a>
      </div>
      <div class="col-12 col-md-6 test-shine">
      </div>
    </div>
  </div>
</div>

注：如果不需要完全贴边、要保留Bootstrap默认的两侧安全留白，删掉container-fluid上的px-0和row上的mx-0类即可。移动端下两个列会自动堆叠为上下排列，符合响应式设计规则。

内容的提问来源于stack exchange，提问作者sara97