html - 如何将引导按钮组水平居中

我需要将按钮组居中到页面顶部。我尝试添加自定义CSS和边距：0自动添加到它，但没有帮助。有什么建议么？谢谢
（我正在使用bootstrap v4.0.0-alpha.6）

的HTML：

    <head>

        <title>Title</title>

        <link rel="stylesheet" href="bootstrap.min.css">
        <link rel="stylesheet" href="application.css">

        <script src="jquery-3.1.1.min.js"></script>
        <script src="jquery-ui.js"></script>
        <script src="application.js"></script>

    </head>

    <body>

        <div id="header">

            <div id="logo">

                Logo

            </div>

            <div id="button-container" class="btn-group">

                <button class="btn btn-primary">Button 1</button>
                <button class="btn btn-primary">Button 2</button>
                <button class="btn btn-primary">Button 3</button>
                <button class="btn btn-primary">Button 4</button>

            </div>

        </div>

    </body>

</html>

CSS：

#button-container {
    width: 333px;
    margin: 0 auto !important;
}

最佳答案

好的按钮组是一个inline-block元素，因此只需将其放在class="text-center"容器中即可，可以是标头本身，也可以是单独的div，例如此演示：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<div id="header">

  <div id="logo">

    Logo

  </div>
  <div class="text-center">
    <div id="button-container" class="btn-group">

      <button class="btn btn-primary">Button 1</button>
      <button class="btn btn-primary">Button 2</button>
      <button class="btn btn-primary">Button 3</button>
      <button class="btn btn-primary">Button 4</button>

    </div>
  </div>


</div>

关于html - 如何将引导按钮组水平居中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42188616/