Question

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

努力让2个按钮在彼此相邻的中心对齐。看起来在某些宽度上很好，但是以全宽度流到下一行

P(m)

我的CSS

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

Answer 1

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

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

DEMO

Answer 2

您必须使用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>

Answer 3

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

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

Answer 4

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

在Bootstrap Div中将2个按钮彼此相邻放置

4 个答案: