111

我需要帮助来解决问题，我需要在 bootstrap4 的列中居中内容，请在下面找到我的代码

<div class="container">
    <div class="row justify-content-center">
        <div class="col-3">
        <div class="nauk-info-connections">
        </div>
     </div>
</div>
4

7 回答 7

240

引导程序 5（2021 年更新）

由于仍在使用 flexbox，Bootstrap 5 中的居中方法以相同的方式工作。列可以使用偏移、自动边距或 justify-content-center (flexbox) 居中。

Bootstrap 5 居中方法的演示

Bootstrap 4（原始答案）

Bootstrap 4中有多种水平居中方法...

  • text-center用于中心display:inline元素
  • offset-*或mx-auto可用于居中列( col-*)
  • 或者，justify-content-center在row到中心列( col-*)
  • mx-autodisplay:block用于内部元素居中d-flex

mx-auto（自动 x 轴边距）将居中display:block或display:flex具有已定义宽度（%、vw、px 等）的元素。网格列上默认使用弹性盒，因此弹性盒居中的方法也多种多样。

Bootstrap 4 居中方法的演示

在您的情况下，使用mx-auto将其居中col-3并将text-center其内容居中..

<div class="row">
    <div class="col-3 mx-auto">
        <div class="text-center">
            center
        </div>
    </div>
</div>

https://codeply.com/go/GRUfnxl3Ol

或者，justify-content-center在 flexbox 元素上使用.row)：

<div class="container">
    <div class="row justify-content-center">
        <div class="col-3 text-center">
            center
        </div>
    </div>
</div>

另请参阅：
Bootstrap 中的垂直对齐中心

于 2017-03-02T15:13:37.897 回答
19 

<div class="container">
    <div class="row">
        <div class="col d-flex justify-content-center">
             CenterContent
        </div>
    </div>
</div>

根据需要为列启用“flex”并使用 justify-content-center

于 2019-10-14T12:44:59.503 回答
8

将类添加text-center到您的列：

<div class="col text-center">
I am centered
</div>
于 2017-11-20T15:13:50.900 回答
5 
<div class="container">
    <div class="row justify-content-center">
        <div class="col-3 text-center">
            Center text goes here
        </div>
    </div>
</div>

我使用justify-content-center了 class 而不是mx-auto在这个答案中。

检查https://jsfiddle.net/sarfarazk/4fsp4ywh/

于 2018-03-20T14:22:47.093 回答
2

bootstrap 4中非常简单的答案，改变这个

<row>
  ...
</row>

对此

<row class="justify-content-center">
  ...
</row>
于 2021-02-06T05:31:53.247 回答
2

2020 : 类似问题

如果您的内容是一组要在页面上居中的按钮，则将它们排成一行并使用justify-content-center。

下面的示例代码：

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

    <button>Action A</button>
    <button>Action B</button>
    <button>Action C</button> 

</div>
于 2020-05-25T15:52:13.137 回答
1 

.row>.col, .row>[class^=col-] {
    padding-top: .75rem;
    padding-bottom: .75rem;
    background-color: rgba(86,61,124,.15);
    border: 1px solid rgba(86,61,124,.2);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col col-lg-2">
      1 of 2
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

于 2019-10-21T13:00:40.743 回答