如何在 Bootstrap CSS 中的行和列内垂直和水平对齐 children？

Question

我正在尝试了解如何对齐 Bootstrap 中的行或列的 children。我对 Bootstrap 布局很陌生，所以请记住这一点。但我对常规 CSS 弹性框非常熟悉。

我想将左栏中的按钮居中，如下所示：

我尝试这样做的代码：

<!DOCTYPE html>

<html lang="en">
  <head>
    <title>The HTML5 Herald</title>

    <link rel="stylesheet" href="../css/paginator.css" />
    <script type="text/javascript" src="../js/paginator.js"></script>
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
      crossorigin="anonymous"
    />
  </head>

  <body>
    <div class="outer-box container thick-border">
      <div class="row">
        <div class="col-lg-7 thin-border">
          <div class="row d-flex justify-content-center">
            <button>1</button>
            <button>2</button>
            <button>3</button>
          </div>
        </div>

        <div class="col-lg-1 thin-border">sdfsdf</div>

        <div class="col-lg-4 thin-border">sdfsdf</div>
      </div>
    </div>
  </body>
</html>

如果你想看我自己的定制CSS:

.outer-box {
  margin-top: 40vh;
  width: 60vw;
}

.thick-border {
  border: 5px solid black;
}

.thin-border {
  border: 2.5px solid black;
}

我只是不明白您应该如何将 children 与 Bootstrap 行和列正确对齐。我是否应该放弃网格系统而完全只使用弹性框？

谢谢！

Answer 1

您需要将 bootstrap version 升级到至少 4，因为您在代码中使用的类在 Bootstrap 版本 4 或更高版本.

如何在 Bootstrap CSS 中的行和列内垂直和水平对齐 children？

How to align children vertically and horizontally inside rows and columns in Bootstrap CSS?

html

css

layout

twitter-bootstrap