当前位置: 首页 > 知识库问答 >
问题:

引导3-列不会居中对齐

夏骏
2023-03-14

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

在代码笔上查看它。

谢谢你的帮助!

共有3个答案

华振
2023-03-14

您可以使用引导中的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 -->

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

张积厚
2023-03-14

您所要做的就是将col-md-3更改为col-md-4。在引导中,div.row中的数字加起来必须是12,包括偏移量的使用。

另外,从列中删除width=“100%”,因为这样会拉伸图像并使用所需的精确大小的图像。

https://getbootstrap.com/docs/3.3/examples/grid/

https://codepen.io/anon/pen/XyyQVR

钱选
2023-03-14

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

我不希望列横跨整行。我认为这将使图像看起来太大的空间。

我所知道的Bootstrap 3的解决方案是向容器添加一个最大宽度的代码,这样它就不会拉伸全屏/元素(而不会从图像中删除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 -->
 类似资料:
  • 我有以下代码将图像放在比图像大小更宽的表格单元格中心。我使用了文本中心和对齐中产阶级,但没有任何效果。图像仍然在单元格的左侧。我是引导新手,所以不知道任何其他技术。

  • 我已经开始学习Bootstrap了。我的问题是如何中心对齐一个列水平,引导包含12列布局,没有中间数字。更清楚的是,如果是11列布局,中间的数字应该是6(左5列,中间1列,右5列)

  • 我试图将导航栏项目水平居中对齐,但它们向左对齐。 有人能帮忙吗? 这是一个桌面问题-只是要明确,我有这个问题在桌面级别。 这是我目前的代码: 演示:https://jsfiddle.net/cjoasysz/

  • 不知道如何将此按钮居中。在BS3中,我只使用中心块,但在BS4中,这不是一个选项。有什么建议吗?

  • 我想创建一个居中的引导导航栏与标志。我是这样看的: 我怎样才能做到这一点呢?

  • 我正试图在页面中央对齐两幅有响应的图像。 我在用电脑。容器类,但仍然是向右的。