Question

我在网页的左侧显示了一个300x300像素的图像，在该图像的旁边，我想显示两行输入字段。我正在使用Bootstrap，当我尝试将行放在图像的侧面时，这会导致列符号出现问题。

例如，我尝试使用display:inline-block;，即使它工作正常，输入字段也不会一直扩展到行尾。

有人可以帮忙吗？

这是我（干净的）代码：

<label for="profile-pic">
   <input type="file" id="profile-pic" ... />
   <img [src]="profilePic" class="pr-4 pb-4" height="300" width="300" style="cursor:pointer"/> 
</label>

<button
   type="button"
   class="btn btn-danger mb-3"
   style="width: 280px;"
   (click)="..."
>
Delete image
</button>

<div class="row">
   <div class="form-group col-12">
      <label for="email">E-mail</label>
      <input type="email" class="form-control" id="email" name="email">
   </div>
</div>

<div class="row">
   <div class="form-group col-12 col-md-4">
     <label for="name">Name</label>
     <input type="text" class="form-control" id="name" name="name">
   </div>

   <div class="form-group col-12 col-md-4">
    <label for="lastName">Last Name</label>
    <input type="text" class="form-control" id="lastName" name="lastName">
  </div>

  <div class="form-group col-12 col-md-4">
    <label for="surname">Surname</label>
    <input type="text" class="form-control" id="surname" name="surname">
  </div>
</div>

我想要的布局应该大致如下图所示：

您在我的代码中看到的按钮应该放在左侧，直接在图片的下方。

Answer 1

您可以通过使用引导程序类col-**

实现此目的

.form-group {
  margin-bottom: 0!important;
}

To set equal height column
/* .row {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      flex-wrap: wrap;
    }

    .row>[class*='col-'] {
      display: flex;
      flex-direction: column;
    } */

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-4 text-center">

        <img src="https://via.placeholder.com/300x300" class="img-fluid"><br>
        <button type="button" class="btn btn-danger mb-3" style="width: 100%;margin-top:5px" (click)="...">
          Delete image
        </button>

      </div>
      <div class="col-8">

        <div class="row">
          <div class="form-group col-12">
            <label for="email">E-mail</label>
            <input type="email" class="form-control" id="email" name="email">
          </div>
          <div class="form-group col-4 ">
            <label for="name">Name</label>
            <input type="text" class="form-control" id="name" name="name">
          </div>

          <div class="form-group col-4 ">
            <label for="lastName">Last Name</label>
            <input type="text" class="form-control" id="lastName" name="lastName">
          </div>

          <div class="form-group col-4 ">
            <label for="surname">Surname</label>
            <input type="text" class="form-control" id="surname" name="surname">
          </div>

        </div>
      </div>
    </div>
  </div>
</body>

</html>

Answer 2

尝试使用display: flex;。以这种方式处理对齐要容易得多。希望这段测试代码对您有帮助

.d-flex {
  display: flex;
}

.flex-row {
  flex-direction: row;
}

.flex-column {
  flex-direction: column;
}

.email-container {
  border: 3px solid black;
  padding: 10px;
  margin-bottom: 20px;
  text-align: center;
}

.name-container {
  border: 3px solid black;
  padding: 10px;
}

.mr-2 {
  margin-right: 0.5rem;
}

.justify-content-center {
      justify-content: center;
}

<div class="d-flex flex-row justify-content-center">
  <div class="image-container mr-2">
    <img src="https://via.placeholder.com/300x300">
  </div>
  <div class="d-flex flex-column">
    <div class="email-container">
      Email
    </div>
    <div class="d-flex flex-row">
      <div class="name-container mr-2">
        Name
      </div>
      <div class="name-container mr-2">
        Last Name
      </div>
      <div class="name-container">
        Surname
      </div>
    </div>
  </div>
</div>

在图像旁边显示输入字段

2 个答案: