提交按钮和输入在 Bootstrap 4 中具有不同的宽度

Question

我正在使用 Bootstrap 4，但似乎无法使提交按钮与输入按钮的大小相同。我尝试了不同的组合，但每次按钮最终都比输入宽。我在想这可能是一些我不知道的按钮的 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 class 内并且列 class 从 bootstrap 插件中获取 padding-right:15px 和 padding-left:15px .

您可以将 class 添加到列 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 类似于下面的代码，然后将 col-* class 添加到 div。同时将 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>

提交按钮和输入在 Bootstrap 4 中具有不同的宽度

Submit button and input have different widths in Boostrap 4

html

css

forms

submit

bootstrap-4