начальная загрузка с помощью d-inline-блока - PullRequest
0 голосов
/ 11 июня 2018

Я совершенствую свои навыки начальной загрузки, я хочу знать, почему в одном месте для вставки одной работы, а в другом - другой, здесь: d-inline-block и this form-inline, какая разница между этими двумя и почему, например,использование 'form-inline' в месте 'd-inline-block' не будет работать?у обоих есть классы форм?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
  <style>
  body{
  padding:0px;
  margin:0px;}


  
  </style>
</head>
<body>

    <div class="form-group form-inline pt-4">
      <div class="col-sm-10">          
        <div class="fas fa-lock"></div>    <input type="password" class="form-control" id="pwd" placeholder=" password" name="pwd">
      </div>
    </div>
    <div class=" ">        
      <div class="col-sm-offset-2 col-sm-10">
        <div class="checkbox">
        </div>
      </div>
    </div>
    <div class="form-group d-inline-block">          
        <button type="submit" class="btn btn-success ml-3">Login</button>
      </div>
        <div class="form-group d-inline-block">       
        <button type="submit" class="btn btn-primary">Login with facebook</button>
      </div>
    </div>
  </form>
</div>

</body>
</html>

1 Ответ

0 голосов
/ 11 июня 2018

Разница в том, что .form-inline позволяет выровнять метки в линию с соответствующими входами..form-inline должен применяться к элементу form.Когда вы используете .d-inline-block, примененный к form-groups, вы можете выровнять их в ряд, но надписи останутся наверху.Проверьте фрагмент ниже, чтобы увидеть разницу:

form {
  border: 2px solid black;
  padding: 10px;
  margin: 10px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
  <style>
    body {
      padding: 0px;
      margin: 0px;
    }
  </style>
</head>

<body>
 <h6>Inline form</h6>
  <form class="form-inline">

    <div class="form-group">
      <label for="exampleInputEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    </div> 

    <div class="form-group">
      <label for="exampleInputPassword1">Password</label>
      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>

     <div class="form-group d-inline-block">          
        <button type="submit" class="btn btn-success ml-3">Login</button>                 
        <button type="submit" class="btn btn-primary">Login with facebook</button>
      </div>
  </form>
  <h6>Not inline form with .form-group.d-inline-block</h6>
  <form>
    <div class="form-group d-inline-block">
      <label for="exampleInputEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    </div>

    <div class="form-group  d-inline-block">
      <label for="exampleInputPassword1">Password</label>
      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>

     <div class="form-group d-inline-block">          
        <button type="submit" class="btn btn-success ml-3">Login</button>                 
        <button type="submit" class="btn btn-primary">Login with facebook</button>
      </div>
  </form>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...