【发布时间】：2018-08-23 15:27:56
【问题描述】：
我正在制作一个线框并尝试基于它创建 HTML。这是我需要构建的结构：
这是我到目前为止所做的，但没有正确呈现对齐方式。我使用了两列网格方法，然后使用了表单内联类，但是标签和文本框没有在一行中对齐。：
<style>
.body {
padding: 1px 1px 1px 1px;
}
.column {
float: left;
width: 50%;
}
.customLegend {
border: 1px solid #000;
padding: 2em 0 1em;
margin-top: 2em;
position: relative;
}
.customLegend legend {
border: 0;
background: #fff;
width: auto;
transform: translateY(-50%);
position: absolute;
top: 0;
left: 1em;
padding: 0 .5em;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container body">
<fieldset class="customLegend">
<legend>Sources</legend>
<div class="row">
<!-- Left Section -->
<div class="column">
<div class="form-inline">
<div class="form-inline">
<label>Initial Reporter </label>
<input type="text" class="form-control" />
</div>
<div class="form-inline">
<label class="lbl">First Name </label>
<input type="text" class="form-control" />
</div>
<div class="form-inline">
<label class="lbl">Phone Number </label>
<input type="text" class="form-control" />
</div>
<div class="form-inline">
<label class="lbl">Title </label>
<input type="text" class="form-control" />
</div>
<div class="form-inline">
<label class="lbl">Address </label>
<textarea class="form-control"> </textarea>
</div>
<div class="form-group">
<label class="lbl">Qualification </label>
<select class="form-control">
<option value="0"> </option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</div>
<div class="form-group">
<label class="lbl">Primary Source </label>
<input type="checkbox" class="form-control" />
</div>
<div class="form-group">
<label class="lbl">P I Usage </label>
<select class="form-control">
<option value="0"> </option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</div>
</div>
</div>
<!-- Right Section -->
<div class="column">
<div class="form-inline">
<div class="form-group">
<label class="lbl">Ok to Contact? </label>
<select class="form-control">
<option value="0"> </option>
<option value="1">Yes</option>
<option value="2">No</option>
</select>
</div>
<div class="form-group">
<span class="form-inline">
<label>Last Name </label>
<input type="text" class="form-control" />
</span>
</div>
<div class="form-group">
<span class="form-inline">
<label>Email </label>
<input type="text" class="form-control" />
</span>
</div>
<div class="form-group">
<span class="form-inline">
<label>Company </label>
<input type="text" class="form-control" />
</span>
</div>
<div class="form-group">
<span class="form-inline">
<label>Country </label>
<input type="text" class="form-control" />
</span>
</div>
<div class="form-group">
<span class="form-inline">
<label>Zip/Postal </label>
<input type="text" class="form-control" />
</span>
</div>
<div class="form-group">
<span class="form-inline">
<label>City </label>
<input type="text" class="form-control" />
</span>
</div>
<div class="form-group">
<span class="form-inline">
<label>State/Region </label>
<input type="text" class="form-control" />
</span>
</div>
<div class="form-group">
<span class="form-inline">
<label>Phone Number 2 </label>
<input type="text" class="form-control" />
</span>
</div>
<div class="form-group">
<span class="form-inline">
<label>FAX </label>
<input type="text" class="form-control" />
</span>
</div>
</div>
</div>
</div>
</fieldset>
<button class="btn btn-primary">Create New Source</button>
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
【问题讨论】：
-
如果您使用引导程序，那么在行内您可以使用 col 并排对齐项目getbootstrap.com/docs/4.0/layout/grid 这将使您对引导程序中的网格和列有更多了解
标签： html css twitter-bootstrap bootstrap-4