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-*是弹性项目，因此你必须使它们成为弹性容器，以便使用margin：auto with elements with {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>

Bootstrap - 在容器流体

1 个答案: