尝试将引导按钮居中（避免“全宽”）
Posted
技术标签:
【中文标题】尝试将引导按钮居中（避免“全宽”）【英文标题】：Trying to center a bootstrap button (avoid "full width") 【发布时间】：2019-11-12 20:22:11 【问题描述】：此代码（使用引导程序 4）使按钮变为全角。
如何使按钮恰好适合它所在的文本？我认为它需要放在一个列中？
<section class="call-to-action text-white text-center">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-xl-12" style="text-align:center">
<h1>Bunch of text Bunch of text Bunch of text Bunch of text Bunch of text Bunch of text Bunch of text</h1>
<a href="#scrolltotop" class="btn btn-block btn-lg btn-danger" style="margin-top:40px";>Find Out Now!</a>
</div>
</div>
</div>
</section>
感谢您提供的所有帮助 - 我是 Bootsrap 4 的新手。
【问题讨论】：
【参考方案1】：只需删除 btn-block 和 col-xs-** 在 V4 中被删除。已被col-** 取代
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<section class="call-to-action text-white text-center">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-12" style="text-align:center">
<h1 style="color:black">Bunch of text Bunch of text Bunch of text Bunch of text Bunch of text Bunch of text Bunch of text</h1>
<a href="#scrolltotop" class="btn btn-md btn-danger" style="margin-top:40px";>Find Out Now!</a>
</div>
</div>
</div>
</section>【讨论】：
【参考方案2】：这另一个问题可以帮助无法解决问题的人：Bootstrap 4, How do I center-align a button?
总而言之，您需要在带有class = "col" 的div 中添加按钮。喜欢：
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col text-center">
<button class="btn">BUTTON</button>
</div>
</div>
</div>
【讨论】：
以上是关于尝试将引导按钮居中（避免“全宽”）的主要内容，如果未能解决你的问题，请参考以下文章