twitter-bootstrap 在 Bootstrap Div 中将 2 个按钮并排放置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33233102/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Place 2 buttons next to each other in Bootstrap Div
提问by Melda S
Looking to have a title, subtitle and then two boxes close together and next to each other in the final third div.
希望有一个标题、副标题，然后在最后的第三个 div 中将两个框靠近在一起并彼此相邻。
Struggling to get 2 buttons to align in the centre next to each other. Seems fine in certain widths, but flows onto the next line at full width
努力让 2 个按钮在彼此相邻的中心对齐。在某些宽度上看起来不错，但以全宽流到下一行
<div class="button-box">
<div class="myoffer3 col-lg-6">
<a href="mylink.php" class="btn btn-info" role="button">About Us</a>
</div>
<div class="myoffer4 col-lg-6">
<a href="mylink.php" class="btn btn-info" role="button">Our Products</a>
</div>
</div>
</div>
My CSS
我的 CSS
.myoffer3 {
display: inline;
padding:20px;
}
.myoffer4 {
display: inline;
padding: 0 20px;
}
.button-box {
width:100%;
text-align:center;
}
回答by Fiido93
I already knew what you mean. Here is the correct way to fix.
我已经知道你的意思了。这是正确的修复方法。
HTML
HTML
<div class="button-box col-lg-12">
<a href="mylink.php" class="btn btn-info" role="button">About Us</a>
<a href="mylink.php" class="btn btn-info" role="button">Our Products</a>
</div>
CSS
CSS
.button-box {
text-align:center;
margin-top:20px;
}
回答by Prasanga
You have to use boostrap class text-center
你必须使用boostrap类 text-center
Use below like this,
下面像这样使用，
<div class="button-box">
<div class="myoffer3 col-lg-6">
<a href="mylink.php" class="btn btn-info text-center" role="button">About Us</a>
</div>
<div class="myoffer4 col-lg-6">
<a href="mylink.php" class="btn btn-info text-center" role="button">Our Products</a>
</div>
</div>
</div>
回答by Jelmer
<div style="text-align: center;">
<a href="#" class="btn btn-info" role="button">About Us</a>
<a href="#" class="btn btn-info" role="button">Our Products</a>
</div>
This works for me, the buttons are next to each other
这对我有用，按钮彼此相邻
回答by Ravi More
Simplest Way to do in Bootstrap 4 and above / Two Button Inline.
在 Bootstrap 4 及更高版本/两个按钮内联中最简单的方法。
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
<button class="btn btn-primary">Download</button><button class="btn btn-primary ml-3">Print Confirmation</button>
</body>
</html>