html - Bootstrap 3 - 列不会居中对齐

Question

我正在尝试将三个 Bootstrap 列居中对齐。我不希望列跨越整行。我认为这会使图像看起来对于空间来说太大了。这就是我放置三个“col-md-3”列的原因。我更喜欢这个尺码栏。我只希望列居中对齐。我以为我可以将类名“justify-content-md-center”应用到该行，它会起作用，但它不起作用。有谁知道如何使用 Bootstrap 3 将下面的列居中对齐？可能吗？

这是我的代码:

<div class="container">
    <div class="row justify-content-md-center">

        <div class="col-md-3 text-center">
            <img alt="TBD" width="100%" src="https://via.placeholder.com/150" />
        </div>

        <div class="col-md-3 text-center">
            <img alt="TBD" width="100%" src="https://via.placeholder.com/150" />
        </div>

        <div class="col-md-3 text-center">
            <img alt="TBD" width="100%" src="https://via.placeholder.com/150" />
        </div>

    </div><!-- end row -->
</div><!-- end container -->

在 CodePen 上查看.

谢谢你的帮助!

Answer 1

正如其他人所指出的，将 col-md-3 更改为 col-md-4

I do not want the columns to span the entire row. I think that will make the images look too big for the space.

我知道的 Bootstrap 3 解决方案是将 max-width 添加到容器中，这样它就不会拉伸(stretch)整个屏幕/元素(无需从图像中删除 100%将不再使它们调整大小/响应)。

您可能还想使用 col-sm-4 或 col-sm-6，这样当屏幕较小时它们不会太大:

https://codepen.io/StudioKonKon/pen/yQQrdM

.mycontent
{
   max-width: 800px; /* or something else */
}

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">



<div class="container mycontent">
	<div class="row justify-content-md-center">

		<div class="col-md-4 text-center">
			<img alt="TBD" width="100%" src="https://via.placeholder.com/150" />
		</div>

		<div class="col-md-4 text-center">
			<img alt="TBD" width="100%" src="https://via.placeholder.com/150" />
		</div>

		<div class="col-md-4 text-center">
			<img alt="TBD" width="100%" src="https://via.placeholder.com/150" />
		</div>

	</div><!-- end row -->
</div><!-- end container -->