Bootstrap-在容器流体内垂直和水平居中放置内容

Question

就像标题中所说的那样，在Bootstrap 4中，我无法弄清楚如何在.container-fluid内部的列中居中显示内容。

这是我的代码，有人可以让我知道我做错了吗？

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-md-4 my-auto mx-auto">
      <div class="mx-auto">
        <h1 class="mb-5">This is a title
        </h1>
        <p class="mb-5">Lorem ipsum</p>
        <a href="#">Click me</a>
      </div>
    </div>
    <div class="col-md-8">
      <p>Something else that's not important but needs to be here </p>
    </div>
  </div>

.mx-auto为什么不起作用，我可以代替它使用什么？

Answer 1

该col-*是柔性的项目，所以你也必须让他们的柔性容器，以便像你想要的（垂直和/或水平），使用边缘到中心的内容：汽车的元素（my-auto/ mx-auto）或align-items-*/ jusity-content-*与容器：

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-md-4 d-flex flex-column align-items-center justify-content-center">
      <h1 class="mb-5">This is a title
      </h1>
      <p class="mb-5">Lorem ipsum</p>
      <a href="#">Click me</a>
    </div>
    <div class="col-md-8 d-flex flex-column ">
      <p class="my-auto mx-auto">Something else that's not important but needs to be here </p>
    </div>
  </div>