Кнопка Boost и кнопка ввода имеют разную ширину в Boostrap 4 - PullRequest
Новая
       4

Кнопка Boost и кнопка ввода имеют разную ширину в Boostrap 4

0 голосов
/ 09 сентября 2018

Я использую Bootstrap 4 и не могу сделать кнопку отправки того же размера, что и ввод. Я пробовал разные комбинации, но каждый раз кнопка оказывается шире, чем вход. Я думаю, что это может быть какой-то CSS-код Bootstrap по умолчанию для кнопок, о которых я не знаю? Спасибо!

Это мой код: `

    <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>

1 Ответ

0 голосов
/ 09 сентября 2018

Первое решение

Причина в том, что ваши поля ввода находятся внутри col класса и столбцов класса получают 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 как в приведенном ниже коде и добавьте col-* класс к этому 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>
...