代码之家  ›  专栏  ›  技术社区  ›  mvasco

Bootstrap按钮,文本分布在两行中,每行字体大小不同

  •  0
  • mvasco  · 技术社区  · 4 年前

    我正在网站上做一个按钮。

    这是当前的按钮代码:

    <a href="pickupdeliverypu.php" class="button  button-rounded" style=" margin: 0 auto; 
        text-align: center;color: #fff; background-color: #ff6600">Start Using Pickup & Delivery</a>
    

    这是当前的输出:

    enter image description here

    我想按如下方式更改按钮:

    enter image description here

    但我无法在每个按钮文本行获得不同字体大小的文本。

    1 回复  |  直到 4 年前
        1
  •  1
  •   Sam    4 年前

    你可以使用 br 标签,看起来像这样:

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
    
    <div class="m-4">
      <button class="btn btn-primary">
        <span style="font-size:18px">Order Online</span><br/>
        <span style="font-size:10px">Delivery &amp; Pickup</span>
      </button>
    </div>

    然后,您还可以调整 line-height br 标签。或者指定类而不是内联样式。