首页 > 解决方案 > 如何更改按钮的外观

问题描述

我在这里有这个按钮“撤回”我怎样才能使名称适合 1 行中的按钮?

这是代码

    <div class="col-sm-4 pb-3">
      <!-- Card -->
<div class="card card-image h-90 " >

  <!-- Content -->
  <div class="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-3 justify-content-center ">
    <div>
      <h5 class="pink-text"><i class="fas fa-chart-line"></i> Your Rewards</h5>
      <h3 class="card-title pt-2"><strong>Earned AGI</strong></h3>
        <p>AGI Dividends</p>
        <h3 id="myDividends">0</h3>
        <br>

      <div class="row">
      <div class="col-lg-6  pb-3">
        <button type="button" class="btn btn-primary  btn-block" id="reinvest" onclick="reinvest()" >REINVEST</button>

      </div>
      <div class="col-lg-6 ">
        <button type="button" class="btn btn-primary  btn-block" id="withdraw"  onclick="withdraw()">WITHDRAW</button>
      </div>
    </div>

    </div>
  </div>

这是图像

在此处输入图像描述

标签: twitter-bootstrap

解决方案


尝试添加 CSS white-space: nowrap 以从不换行 或者您可以减少该按钮的填充。

.btn {
   white-space: nowrap;
   text-align: center;
}

或者

 .btn {
   padding: 0;
   text-align: center;
}

推荐阅读