代码之家  ›  专栏  ›  技术社区  ›  Noor ul ain Ibrahim

如何在一行中制作两个大小相同的按钮?

  •  1
  • Noor ul ain Ibrahim  · 技术社区  · 2 年前

    我甚至试过这个链接 How to make two buttons the same size?

    但这对我没用

    我正在使用bootstrap 4,希望在一行中制作两个大小相同的按钮。 我怎样才能解决这个问题? Customer sign up and seller sign up button should be of same size

    这是我的密码

    <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>
    
    
    
    
    2 回复  |  直到 2 年前
        1
  •  1
  •   Hamid Israfilov    2 年前

    您的代码在第40行的类字中缺少“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>
    
        2
  •  1
  •   Lucifer    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;
    

    }