Bootstrap 4工具栏如何实现水平居中？

我完全懂你的困扰——用固定宽度来凑居中效果实在太死板了，尤其是工具栏里的按钮数量还会变化的时候。其实Bootstrap 4里有更优雅的方案，不用固定宽度就能实现真正的自适应居中。

问题根源 #

默认状态下，btn-toolbar是块级元素，它的宽度会自动占满父容器的100%。这时候你加mx-auto根本起不了作用，因为它已经没有多余空间可以“自动分配边距”了。固定宽度的方式只能临时应付，没法适配按钮数量变化的场景。

解决方案 #

只需要两步就能搞定：

1. 给btn-toolbar添加d-inline-block类，让它的宽度收缩为内部内容的实际宽度；
2. 给btn-toolbar的父容器添加text-center类，利用文本居中的特性让行内块元素水平居中。

修改后的完整代码 #

<!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 text-center" style="background:red; padding: 1rem;">
Centered element<br/>
<div class="btn-toolbar d-inline-block" 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 class="btn-toolbar d-inline-block mt-2" role="toolbar">
<div class="btn-group mr-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-success">A</button>
<button type="button" class="btn btn-success">B</button>
</div>
<div class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn btn-danger">X</button>
</div>
</div>
</div>
</body>
</html>

为什么这样有效？ #

• d-inline-block：把btn-toolbar从占满整行的块级元素改成行内块元素，它的宽度不再固定为100%，而是由内部按钮组的总宽度决定；
• text-center：父容器的这个类会让所有行内/行内块子元素自动水平居中，完美适配工具栏宽度变化的场景；
• 去掉了原来的固定宽度width:300px，现在不管工具栏里有多少按钮，都会自动调整宽度并保持居中。

内容的提问来源于stack exchange，提问作者Jef Patat