【发布时间】：2018-01-16 13:34:56
【问题描述】：
我正在尝试将工具栏水平居中。我发现了很多不同的解决方案，但似乎没有一个在 bootstrap 4 中有效。
这是我得到的最接近的，但它需要我给出一个宽度。工具栏将自身置于面板的最左侧。工具栏中的项目数量可能会有所不同，因此工具栏永远不会真正居中。如何正确居中工具栏？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
</head>
<body class="bg-secondary">
<div class="mx-auto" style="width: 300px; background:red">
Centered element<br/>
<div class="btn-toolbar mx-auto" role="toolbar">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<button type="button" class="btn btn-primary">3</button>
<button type="button" class="btn btn-primary">4</button>
</div>
</div>
</div>
</body>
</html>编辑：这不是 [https://stackoverflow.com/questions/43952368] 的副本。这个问题是关于容器中的 navbar，而不是工具栏。我在搜索时看到了这个问题，但我没有看到它如何应用于呈现的 html。
【问题讨论】：
-
注意：
<br>不使用或不需要结束斜线，而且从来没有。 -
您尝试过哪些不起作用的方法？包含元素上的
text-align:center怎么样？即使没有宽度似乎也能工作...... -
@Rob 我看不出那个副本是怎么回事。也许对于一个有经验的用户，但对于我作为一个新手来说，它似乎完全不同的导航栏工具栏。
-
@tobiv 我在红色 div 上尝试过，但显然需要另一个额外的 div，如 ZimSystem 所示，我没有尝试过
标签： css twitter-bootstrap bootstrap-4