Question

我正在提高我的引导技能，我想知道为什么在一个地方内联一个作品而在一个地方另一个，这里：d-inline-block和这种形式 - 内联，这两者之间有什么区别以及为什么例如在'd-inline-block'中使用'form-inline'不会工作？两者都有表格类？

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

Answer 1

不同之处在于.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>

使用d-inline-block进行内联引导

1 个答案: