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

问题描述

.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>

解决方法

你快到了。

您实际上所做的是过早关闭 .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 工作