gpt4 book ai didi

html - 如何水平居中 Bootstrap 按钮组

转载 作者:太空宇宙 更新时间:2023-11-03 20:07:54 29 4
gpt4 key购买 nike

我需要将按钮组居中放置在页面顶部。我尝试添加自定义 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/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com