尝试将引导按钮居中（避免“全宽”）答案

【问题标题】：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 的新手。

【问题讨论】：

标签： bootstrap-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>

【讨论】：