Bootstrap 网格没有居中？我究竟做错了什么

Question

我正在从事免费代码训练营项目，但遇到了障碍。我无法将图像下方的段落文本居中。我设置为 grid 4.

<div class="container">
  <div class="row">
    <div class="jumbotron">
      <div class="col-xs-12">
        <h1 class="text-center text-uppercase">Bernie Sanders</h1>
        <em><h2 class="text-center">"The man who stands for the people"</h2></em>
        <img id="bernie" src="https://imgur.com/iw13OaU.jpg" alt="Bernie Sanders">
        <div class="col-xs-4 col-md-4">
          <h3 class="text-center" id="timeline">A timeline of Bernie Sanders Accomplishments</h3>
          <ul class="text-justify small" id="list">
          ...

https://codepen.io/thehiddencheese/pen/WMWJeW

Answer 1

首先将你的 grid 4 包裹到 .row 并使用 bootstrap [Flex Utilities] .justify-content-center class 到那一行

<div class="row justify-content-center">
  <div class="col-sm-4"></div>
</div>

另一个解决方案是使用 [offset] class 就像

<div class="row">
  <div class="col-sm-4 offset-sm-4"></div>
</div>

Answer 2

您可以将 text-align: center 用于 div <div class="col-xs-4 col-md-4">，然后段落文本将在图像下方的页面中心对齐。

但是，项目符号点和文本居中对齐看起来很奇怪。如果您将它对齐到中心，我建议不要使用子弹 :)。

下面是您可以使用的 div 标签。

<div class="col-xs-4 col-md-4" style=" text-align:  center;">

Bootstrap 网格没有居中？我究竟做错了什么

Bootstrap grid not centering? What am I doing wrong

html

css

twitter-bootstrap-4