如何使两个按钮排成一排大小相同？

Question

我什至试过这个linkHow to make two buttons the same size?

但这对我不起作用

我正在使用 bootstrap 4 并希望将两个按钮排成一行，大小相同。我怎样才能解决这个问题？

这是我的代码

<style>

  .form-style-5{
    max-width: 500px;
    padding: 10px 20px;
    margin-top:2em;
    margin: 10px auto;
    margin-bottom: 1em;
    padding: 30px;
    background-color: #ffffff;
    border-radius: 8px;
    font-family: Georgia, "Times New Roman", Times, serif;
  }

  .container{
    margin-bottom: 2em;
  }

  .col-sm-6{
    width:120px;
    height:50px;
    text-align:center;
    line-height:1.1em;
    font-size:1.1em;
  }
  </style>
<body style="background-color: #040b5a">
    <div class="container" style="padding:50px">
    <form class="form-style-5" method="post">
      <h1 style="font-family:verdana">Login</h1>
        {% csrf_token %}
        <table>
        {{form | crispy}}
        <button class="btn btn-primary btn-block fa-lg gradient-custom-2 mb-3" type="submit" style="background-color: #040b5a; border: 0px">Login</button>
    </form>
    <hr>
    <div class= "row">
      <div class="col-sm-6"><a href="/signup" class="btn btn-primary btn-block fa-lg gradient-custom-2 mb-3" style="background-color: #040b5a; border: 0px"> Customer Sign-up</a></div>
      <div clas="col-sm-6"><a href="/seller_signup" class="btn btn-primary btn-block fa-lg gradient-custom-2 mb-3" style="background-color: #040b5a; border: 0px">Seller Sign-up</a></div>
    </div>
  </table>
</div>
</body>
</html>

Answer 1

您的代码第 40 行 class 字词缺少“s”

<div class="col-sm-6"><a href="/seller_signup" class="btn btn-primary btn-block fa-lg gradient-custom-2 mb-3" style="background-color: #040b5a; border: 0px">Seller Sign-up</a></div>

Answer 2

<div class= "row">
  <div class="col-sm-6"><a class="btn"> Customer Sign-up</a></div>
<div class="col-sm-6"><a class="btn">Seller Sign-up</a></div>
</div>

 .btn{
width: 100%;
text-align:center;
background: #040b5a;
color:#fff !important;

}

如何使两个按钮排成一排大小相同？

How to make two buttons in a row of same size?

html

css

twitter-bootstrap

bootstrap-4