col 没有正确对齐答案

【问题标题】：col doesn't align correctlycol 没有正确对齐
【发布时间】：2020-05-13 23:23:12
【问题描述】：

我需要将 3 个元素与引导程序对齐。我使用 Angular 8，所以在安装引导程序时，我只需要 css（我只需要 col-md、col 等）所以我这样做：

 "styles": [
              "src/styles.sass",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"

            ],

在我的 style.sass 中我这样做：

@import "~bootstrap/dist/css/bootstrap.css";

所以在我的标题组件中我这样做：

  <div id="test" class="container">
          <div class="row">
              <div class="col-12"> 
                      <div class="col-3">
                          <img id="iconn" src="assets/img/iconf.png" />
                      </div>
                      <div class="col-5">
                          <h1 id="home">HOME</h1>
                      </div>
                      <div class="col-3 offset-2">
                          <img id="log" src="assets/img/logo_f.png" class="img-responsive" />
                      </div>
                  </div>
              </div>          
      </div>

问题是两个图像和文本在不同的行中，但我希望它们在同一行中。有人可以帮忙吗？

【问题讨论】：

您是否尝试过移除包装 .col-12 元素并确保您的图像随容器缩放？ .col- 元素只能是引导程序中 .row 元素的子元素，而不是其他 .col- 元素。

标签： css angular sass bootstrap-4

【解决方案1】：

您在代码中添加了额外的col-12。 offset 应该是 1

<div class="row">
        <div class="col-3">
            <img id="iconn" src="assets/img/iconf.png" />
        </div>
        <div class="col-5">
            <h1 id="home">HOME</h1>
        </div>
        <div class="col-3 offset-1">
            <img id="log" src="assets/img/logo_f.png" class="img-responsive" />
        </div>
</div>

【讨论】：