图像未对齐到引导行

Question

我使用Bootstrap网格将Angular中的4个图像的位置居中。当我将它们放在同一row张中时，图像与HTML中的中心完全对齐。但是，如果我将它们放在不同的HTML工作表中，则4个图像并不完全位于中心，因为我注意到它们略微偏向左侧。

总结一下，这可行（./home.component.html）：

<div class="container">

    <p class="h2-responsive itemsTitle">Items with free shipping</p>
    <hr>
    <div class="row">
        <div class="col-sm">
          <img class="itemCard" src="https://images.unsplash.com/photo-1505429155379-441cc7a574f7?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=0ddea5332a8ab2d09cf5eec6a57d3f9f&auto=format&fit=crop&w=334&q=80">
        </div>
        <div class="col-sm">
          <img class="itemCard" src="https://images.unsplash.com/photo-1505429155379-441cc7a574f7?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=0ddea5332a8ab2d09cf5eec6a57d3f9f&auto=format&fit=crop&w=334&q=80">
        </div>
        <div class="col-sm">
          <img class="itemCard" src="https://images.unsplash.com/photo-1505429155379-441cc7a574f7?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=0ddea5332a8ab2d09cf5eec6a57d3f9f&auto=format&fit=crop&w=334&q=80">
        </div>
        <div class="col-sm">
          <img class="itemCard" src="https://images.unsplash.com/photo-1505429155379-441cc7a574f7?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=0ddea5332a8ab2d09cf5eec6a57d3f9f&auto=format&fit=crop&w=334&q=80">
        </div>
    </div>

</div>

但这不是（./home.component.html）：

<div class="container">

    <p class="h2-responsive itemsTitle">Items with free shipping</p>
    <hr>
    <div class="row">
        <app-home-item></app-home-item>
        <app-home-item></app-home-item>
        <app-home-item></app-home-item>
        <app-home-item></app-home-item>
    </div>

</div>

（./家庭item.component.html）：

<div class="col-sm">
    <img class="itemCard" src="https://images.unsplash.com/photo-1505429155379-441cc7a574f7?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=0ddea5332a8ab2d09cf5eec6a57d3f9f&auto=format&fit=crop&w=334&q=80">
</div>

这是发生了什么。带圆圈的部分显示图像略微偏向左侧，当我使用上面的第一个示例代码时，这种情况不会发生。

我不太确定哪里出错了。所有组件都在app.module中导入和声明。引导链接也放在index.html中。

CSS（在styles.css中）：

.itemsTitle {
  margin-top: 16px;
}

.itemCard {
  width: 15rem;
}

Answer 1

问题在于app-home-item内的col宽度，因此在该组件中将flex: 1;添加到包装器