Question

我试图居中对齐三个Bootstrap列。我不希望这些列跨越整个行。我认为这会使图像对于空间显得太大。这就是为什么我放置了三个“ col-md-3”列。我更喜欢此尺寸列。我只希望列居中对齐。我以为可以将类名称“ justify-content-md-center”应用于行，它可以工作，但不能工作。有谁知道如何使用Bootstrap 3将下面的列居中对齐？有可能吗？

这是我的代码：

mylist = []
for chunk in mystr.split("|"):
    mylist.extend(chunk.split())

在CodePen上查看它。

感谢您的帮助！

Answer 1

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

还从列中删除width="100%"，因为这将拉伸您的图像并使用您需要的精确尺寸的图像。

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

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

Answer 2

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

我不希望这些列跨越整个行。我认为这会使图像对于空间显得太大。

我对Bootstrap 3知道的解决方案是在容器中添加max-width，以使其不会拉伸整个屏幕/元素（无需从图像中删除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 -->

Answer 3

您可以使用Bootstrap中的[x for x in pd.to_numeric(lst, errors='coerce') if x > 0]类来偏移每一列，如下所示：

col-md-offset-*

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

Answer 4

希望这就是您想要的，您无法将col宽度设置为12之3，并且希望获得居中的项目，因此您必须将其设置为4（4 * 3 = 12）（全行宽/ 3），然后您可以像这样https://codepen.io/Dadboz/pen/pQQBMR

设置容器的最大宽度

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">



<div class="container" style="max-width :760px">
	<div class="row d-flex justify-content-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 -->

Answer 5

为此，我将使用2行，第一行使用-offset（我使用8行，偏移量为2）。然后将您的3列更改为4而不是3，以总计为12。

像这样（使用xs列大小进行演示）：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">

  <div class="row">
    <div class="col-xs-8 col-xs-offset-2">

      <div class="row">
        <div class="col-xs-4 text-center">
          <img alt="TBD" width="100%" src="https://via.placeholder.com/150" />
        </div>

        <div class="col-xs-4 text-center">
          <img alt="TBD" width="100%" src="https://via.placeholder.com/150" />
        </div>

        <div class="col-xs-4 text-center">
          <img alt="TBD" width="100%" src="https://via.placeholder.com/150" />
        </div>
      </div>
      <!-- end row 2 -->

    </div>
  </div>
  <!-- end row 1 -->

</div>
<!-- end container -->

Bootstrap 3-列不会居中对齐

5 个答案: