如何将全宽容器的内容左侧相对于固定宽度的容器对齐答案

【问题标题】：How to align the contents left side of a full-width container relative to a fixed-width container如何将全宽容器的内容左侧相对于固定宽度的容器对齐
【发布时间】：2021-05-07 02:30:12
【问题描述】：

.col-sm-4 的左缩进有问题无法将其内容相对于具有固定宽度的容器对齐。


    .container {       
      max-width: 1200px;
      margin: 0 auto;  
    }
    
    .fluid-cintainer {       
      width: 100%;
      margin: 0 auto;  
    }

HTML

<main>
      <div class="container"></div>
      <div class="fluid-cintainer">
        <div class="row">
          <div class="col-sm-4"></div>
          <div class="col-sm-8"><img src="" alt="Full width of .col-sm-8"></div>
        </div>
      </div>
    </main>

【问题讨论】：

标签： css sass containers fluid-layout fixed-width

【解决方案1】：

你快到了。

您实际上所做的是过早关闭.container 类。

您需要在 .container 类中包含 Fluid-cintainer。

<main>
  <div class="container">
    <div class="fluid-cintainer">
      <div class="row">
        <div class="col-sm-4"></div>
        <div class="col-sm-8"></div>
      </div>
    </div>
  </div>
</main>

这将使您的 CSS 工作

【讨论】：

我试过这种方式，但它不适合我，因为图像必须跨越 .col-sm-8 的宽度。