css - 在图像旁边显示输入字段
问题描述
我的网页左侧显示了一个 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>
我想要的布局应该或多或少如下图所示:
您在我的代码中看到的按钮应该放在左侧,直接在图像下方。
解决方案
您可以通过使用引导类来实现这一点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>
推荐阅读
- xero-api - 缺少 XERO API 员工分类
- azure - 将 Azure 快照复制到不同的区域
- python - 将 pandas 中的列转换为具有特定格式的 to_datetime
- java - 对角星挑战,不明白它的概念?
- php - 在 php 中解决跨站点脚本 (XSS) 的最佳方法/实践?
- javascript - 如何使用输入字段创建按钮?
- asp.net - MVC 中的用户数据
- python - 以下 Python 函数示例的大 O
- ruby-on-rails - 使用 ruby gRPC 执行重试
- node.js - 节点 --enable-source-maps 不输出函数名称