我正在尝试将三个引导列居中对齐。我不希望列跨越整行。我认为这会使图像看起来太大,空间不够。这就是为什么我放了三列“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 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
。在引导中,div.row
中的数字加起来必须是12,包括偏移量的使用。
另外,从列中删除width=“100%”
,因为这样会拉伸图像并使用所需的精确大小的图像。
https://getbootstrap.com/docs/3.3/examples/grid/
https://codepen.io/anon/pen/XyyQVR
正如其他人所指出的,将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中,这不是一个选项。有什么建议吗?
我想创建一个居中的引导导航栏与标志。我是这样看的: 我怎样才能做到这一点呢?
我正试图在页面中央对齐两幅有响应的图像。 我在用电脑。容器类,但仍然是向右的。