Отображать поля ввода рядом с изображением - PullRequest
Новая
       32

Отображать поля ввода рядом с изображением

1 голос
/ 19 июня 2019

У меня есть изображение 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>

Макет, который я хотел бы иметь, должен более или менее выглядеть следующим образом:

enter image description here

Кнопка, которую вы видите в моем коде, должна располагаться слева, прямо вниз по изображению.

Ответы [ 2 ]

2 голосов
/ 19 июня 2019

Этого можно добиться с помощью классов начальной загрузки 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>
0 голосов
/ 19 июня 2019

Попробуйте использовать 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>
...