Question

我正在使用Bootstrap 4，但似乎无法使Submit按钮的大小与输入的大小相同。我尝试了不同的组合，但是每次按钮最终都比输入宽。我想这可能是我不知道的按钮的一些Bootstrap默认CSS？谢谢！

这是我的代码：`

    <div class="container-fluid">

        <div class="row justify-content-center"> 

            <div class="col-sm-6 bg-warning p-2 d-flex justify-content-center" >

                <form action="" method="POST" class="p-5 m-1 bg-danger col-8"> 

                    <div class="form-group row justify-content-center">
                        <div class="col-sm-12 col-md-10 col-lg-9 col-xl-8">
                            <label for="InputEmail1">Email address</label>
                            <input type="email" class="form-control" id="InputEmail1" aria-describedby="emailHelp" name="userEmail" required>
                            <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else</small>
                        </div> 
                    </div> 

                    <div class="form-group row justify-content-center"> 
                        <div class="col-sm-12 col-md-10 col-lg-9 col-xl-8">
                            <label for="exampleInputPassword1">Password</label>
                            <input type="password" class="form-control" id="exampleInputPassword1" name="userPass" required>
                        </div> 
                    </div> 

                    <div class="row justify-content-center">
                           <button type="submit" class="btn btn-success col-sm-12 col-md-10 col-lg-9 col-xl-8" name="submit">Submit</button>
                    </div>

            </form> <!-- end of form -->
        </div> <!-- end of column -->
    </div>  <!-- end of row -->
</div> <!-- end of container -->

</html>

Answer 1

第一个解决方案

原因是您的输入字段位于col类内部，而columns类从引导插件中获取了padding-right:15px和padding-left:15px。

您可以将类添加到padding_0列中

<div class="col-sm-12 col-md-10 col-lg-9 col-xl-8 padding_0">

并添加样式.padding_0{padding-right:0;padding-left:0;}

第二个解决方案

您正在将col-*添加到按钮。

<div class="row justify-content-center">
<button type="submit" class="btn btn-success col-sm-12 col-md-10 col-lg-9 col-xl-8" name="submit">Submit</button>
 </div>

使父div类似于下面的代码，然后向该div添加col-*类。还将width:100%设置为按钮。

<div class="row justify-content-center form-group">
  <div class="col-sm-12 col-md-10 col-lg-9 col-xl-8">
  <button type="submit" name="submit" class="btn btn-success" style="width: 100%;">Submit</button>
     </div>
  </div>

第二个解决方案的片段

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

</head>

<body>
  <div class="container-fluid">

    <div class="row justify-content-center">

      <div class="col-sm-6 bg-warning p-2 d-flex justify-content-center">

        <form action="" method="POST" class="p-5 m-1 bg-danger col-8">

          <div class="form-group row justify-content-center">
            <div class="col-sm-12 col-md-10 col-lg-9 col-xl-8">
              <label for="InputEmail1">Email address</label>
              <input type="email" class="form-control" id="InputEmail1" aria-describedby="emailHelp" name="userEmail" required>
              <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else</small>
            </div>
          </div>

          <div class="form-group row justify-content-center">
            <div class="col-sm-12 col-md-10 col-lg-9 col-xl-8">
              <label for="exampleInputPassword1">Password</label>
              <input type="password" class="form-control" id="exampleInputPassword1" name="userPass" required>
            </div>
          </div>

          <div class="row justify-content-center form-group">
            <div class="col-sm-12 col-md-10 col-lg-9 col-xl-8">
              <button type="submit" name="submit" class="btn btn-success" style="width: 100%;">Submit</button>
            </div>
          </div>

        </form>
        <!-- end of form -->
      </div>
      <!-- end of column -->
    </div>
    <!-- end of row -->
  </div>
  <!-- end of container -->


</body>

</html>

Boostrap 4中的“提交”按钮和输入具有不同的宽度

1 个答案: