注意:使用bootstrap
代码:
<!DOCTYPE>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<style>
.jumbotron
{
margin-top: 20px;
}
.input-group, textarea
{
margin-bottom: 10px;
}
</style>
<body>
<div class = "container">
<div class = "jumbotron text-center">
<h2>Form</h2>
</div>
<form>
<div class = "row">
<div class = "col-md-4">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">First Name:</span>
<input type="text" class="form-control" placeholder="First Name" aria-describedby="basic-addon1">
</div>
</div>
<div class = "col-md-4">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Last Name:</span>
<input type="text" class="form-control" placeholder="Last Name" aria-describedby="basic-addon1">
</div>
</div>
</div>
<div class = "row">
<div class = "col-md-2">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Age:</span>
<input type="text" class="form-control" placeholder="Age" aria-describedby="basic-addon1">
</div>
</div>
<div class = "col-md-2">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Gender:</span>
<input type="text" class="form-control" placeholder="Gender" aria-describedby="basic-addon1">
</div>
</div>
</div>
<div class = "row">
<div class = "col-md-4">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Email Address:</span>
<input type="text" class="form-control" placeholder="Email Address" aria-describedby="basic-addon1">
</div>
</div>
<div class = "col-md-4">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Phone Number:</span>
<input type="text" class="form-control" placeholder="Phone Number" aria-describedby="basic-addon1">
</div>
</div>
</div>
<div class = "row">
<div class = "col-md-8">
<textarea class="form-control" rows="3" placeholder = "Additional comments"></textarea>
</div>
</div>
<div class = "row">
<div class = "col-md-2">
<button type="button" class="btn btn-default btn-lg">Submit</button>
</div>
</div>
</form>
</div>
</body>
</html>
我正在尝试将图像放在我的表单旁边,如图 1 所示。
我尝试了多种方式:即。柱中柱、流体容器等 使用这些方式导致文本框变得更短,并且表格和图像之间的边距变大。
似乎行占据了容器的 100% 宽度,并且无法使用 CSS 调整宽度
关于如何做到这一点有什么想法吗?
另外,我将如何使表格居中?似乎也无法使用与其他元素一起使用的方法来做到这一点
最佳答案
您只需要一个嵌套的行结构。外列是表单结构和图像的包装。包含您的表单本身的内部列加起来为 12。
请注意,为了演示,我已将所有列都转换为 XS,并且两个较短的列不适合小屏幕尺寸。
.row > div {
margin: 5px 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></link>
<div class="container">
<div class="jumbotron text-center">
<h2>Form</h2>
</div>
<div class="row">
<div class="col-xs-8">
<form>
<div class="row">
<div class="col-xs-6">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">First Name:</span>
<input type="text" class="form-control" placeholder="First Name" aria-describedby="basic-addon1">
</div>
</div>
<div class="col-xs-6">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Last Name:</span>
<input type="text" class="form-control" placeholder="Last Name" aria-describedby="basic-addon1">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Age:</span>
<input type="text" class="form-control" placeholder="Age" aria-describedby="basic-addon1">
</div>
</div>
<div class="col-xs-3">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Gender:</span>
<input type="text" class="form-control" placeholder="Gender" aria-describedby="basic-addon1">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Email Address:</span>
<input type="text" class="form-control" placeholder="Email Address" aria-describedby="basic-addon1">
</div>
</div>
<div class="col-xs-6">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Phone Number:</span>
<input type="text" class="form-control" placeholder="Phone Number" aria-describedby="basic-addon1">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<textarea class="form-control" rows="3" placeholder="Additional comments"></textarea>
</div>
</div>
<div class="row">
<div class="col-xs-2">
<button type="button" class="btn btn-default btn-lg">Submit</button>
</div>
</div>
</form>
</div>
<div class="col-xs-4">
<img class="img-responsive" src="http://placehold.it/800x600" />
</div>
</div>
</div>
关于html - 将图像放在表格旁边(带行),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40550398/