Rud*_*iel 0 html css twitter-bootstrap
我需要将按钮组置于页面顶部.我尝试添加自定义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>