图像未与引导行中的中心对齐答案

【问题标题】：Image Not Aligning to Center in Bootstrap Row图像未与引导行中的中心对齐
【发布时间】：2018-04-14 15:10:07
【问题描述】：

我使用 Bootstrap 网格将 Angular 中的 4 个图像的位置居中。当我将图像放置在同一个HTML 表中时，图像与row 的中心完美对齐。但是，如果我将它们放在不同的 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>

(./home-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;
}

【问题讨论】：

引导版本？
引导程序 4.0.0
您想要一行中的 4 张图片？

标签： css angular twitter-bootstrap

【解决方案1】：

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

【讨论】：

我只是想知道为什么同一段代码放在一起放在home.component.html中时可以工作，但分开时却不能工作？
我认为不会，我认为它只是不太明显。图像和列现在正确对齐？现在它应该是每行 4 列，并使用所有可用空间。
不，图像变得非常小。
这些图像的父级 (div) 的宽度是多少？检查未关闭的标签。
你的意思是<div class="col-sm">？它是 270 像素。整行宽度为1140px。