时间戳

首页 > 解决方案 > 尝试将引导按钮居中（避免“全宽”）

bootstrap-4 - 尝试将引导按钮居中（避免“全宽”）

问题描述

此代码（使用引导程序 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

解决方案

只需删除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>

推荐阅读