Question

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

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

Answer 1

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

text-center代表中心display:inline元素
offset-*或mx-auto可用于中心列（col-*）

justify-content-center

row

中心列

col-*

mx-auto用于将display:block

d-flex

mx-auto（自动x轴边距）将使display:block或display:flex元素具有定义的宽度（％，vw，px等）。默认情况下，Flexbox在网格列上使用，因此还有各种flexbox居中方法。

Demo of the Bootstrap 4 Centering Methods

在您的情况下，使用mx-auto将col-3和text-center置于中心位置。

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

http://www.codeply.com/go/GRUfnxl3Ol

在Flexbox元素（justify-content-center）上使用.row

或：

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

另见：
Vertical Align Center in Bootstrap 4

Answer 2

将课程text-center添加到您的专栏：

<div class="col text-center">
I am centered
</div>

Answer 3

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

我在this answer中使用了justify-content-center类而不是mx-auto。

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

Answer 4

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

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

Answer 5

.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>

Answer 6

2020：类似问题

如果您的内容是要在页面上居中的一组按钮，则将它们包装在行中并使用< strong>以内容为中心。

下面的示例代码：

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

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

</div>

Answer 7

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

<row>
  ...
</row>

到这里

<row class="justify-content-center">
  ...
</row>

将内容置于Bootstrap 4

7 个答案: