在引导程序 Div 中将 2 个按钮并排放置

希望在最后的第三个div中有一个标题，副标题，然后两个框靠近并彼此相邻。

努力让 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>

我的 CSS

.myoffer3 {
display: inline;
padding:20px;
}
.myoffer4 {
 display: inline;
 padding: 0 20px;
 }
 .button-box {
  width:100%;
  text-align:center;
 }

我已经知道你的意思了。这是正确的解决方法。

.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

.button-box {
   text-align:center;
   margin-top:20px;
}

演示

你必须使用boostrap类text-center

像这样在下面使用，

<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>

<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>

这对我有用，按钮彼此相邻

在 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>

相关内容

最新更新

热门标签：