Html Bootstrap 3-赢得的列数'；t中心对齐

我正在尝试将三个引导列居中对齐。我不希望列跨越整行。我认为这会使图像看起来太大，空间不够。这就是为什么我放了三列“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 -->

观看

---

谢谢你的帮助

您所要做的就是将

col-md-3

更改为

col-md-4

。在引导中，

div.row

中的数字加起来必须是12，包括偏移量的使用

另外，从列中删除

width=“100%”

，因为这样会拉伸图像并使用所需的精确大小的图像

---

您所要做的就是将

col-md-3

更改为

col-md-4

。在引导中，

div.row

中的数字加起来必须是12，包括偏移量的使用

另外，从列中删除

width=“100%”

，因为这样会拉伸图像并使用所需的精确大小的图像

---

您可以使用引导中的

col md offset-*

类偏移每一列，如下所示：

<div class="container">
    <div class="row">

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

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

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

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

---

上述方法将在相对列之间添加相等的空格。

您可以使用引导中的

col md offset-*

类对每列进行偏移，如下所示：

<div class="container">
    <div class="row">

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

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

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

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

---

上述方法将在相对列之间添加相等的空格。

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

我不希望列跨越整行。我认为这会使图像看起来太大，空间不够

我所知道的Bootstrap 3的解决方案是在容器中添加一个

max width

，这样它就不会拉伸整个屏幕/元素（不从图像中删除100%，因为这将不再使它们调整大小/响应）

您可能还希望使用col-sm-4或col-sm-6，这样当屏幕变小时，它们不会太大：

.mycontent
{
最大宽度：800px；/*或其他*/
}

---

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

我不希望列跨越整行。我认为这会使图像看起来太大，空间不够

我所知道的Bootstrap 3的解决方案是在容器中添加一个

max width

，这样它就不会拉伸整个屏幕/元素（不从图像中删除100%，因为这将不再使它们调整大小/响应）

您可能还希望使用col-sm-4或col-sm-6，这样当屏幕变小时，它们不会太大：

.mycontent
{
最大宽度：800px；/*或其他*/
}

---

希望这是您想要的，您不能将列宽度设置为12个列中的3个，并期望将项目居中，因此您必须将其设置为4（4*3=12）（整行宽度/3），然后像这样设置容器的最大宽度

---

希望这是您想要的，您不能将列宽度设置为12个列中的3个，并期望将项目居中，因此您必须将其设置为4（4*3=12）（整行宽度/3），然后像这样设置容器的最大宽度

---

为此，我将使用2行，第一行的偏移量为

-offset

（我使用8行的偏移量为2）。然后将3列更改为跨度4，而不是3，以将其相加为12

这样（使用

xs

col size进行演示）：

---

为此，我将使用2行，第一行的偏移量为

-offset

（我使用8行的偏移量为2）。然后将3列更改为跨度4，而不是3，以将其相加为12

这样（使用

xs

col size进行演示）：

它必须是Bootstrap 3吗？因为使用bootstrap4，您可以将类

mx auto

添加到

div.row

中，使其以子对象为中心。是的，它必须是bootstrap3。哦，好的。我认为这里的问题是你的3列加起来不是12，而是9。它必须加起来是12，否则你就会缺少

col-3

gap。将列类更改为

col-4

应该可以解决此问题。是否使用md-4并在行中添加右/左填充？Bootstrap 3没有任何本机功能，这就是为什么在4中添加了

mx auto

，它必须是Bootstrap 3吗？因为使用bootstrap4，您可以将类

mx auto

添加到

div.row

中，使其以子对象为中心。是的，它必须是bootstrap3。哦，好的。我认为这里的问题是你的3列加起来不是12，而是9。它必须加起来是12，否则你就会缺少

col-3

gap。将列类更改为

col-4

应该可以解决此问题。是否使用md-4并在行中添加右/左填充？Bootstrap 3没有任何本机功能，这就是为什么在4Whoops中添加了

mx auto

，但忘记点击保存按钮的原因。现在修好了，谢谢！这更好：）我能看到的唯一一个陷阱是询问者说：“我不想要专栏