我需要将按钮组居中放置在页面顶部。我尝试添加自定义 css 和 margin: 0 auto 但它没有帮助。有什么建议么？谢谢 (我正在使用 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><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" class="text-center">
<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>关于html - 如何水平居中 Bootstrap 按钮组，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42188616/