【发布时间】：2017-04-18 19:16:52
【问题描述】：
我正在开发一个涉及使用引导 CSS 的 UI。我正在尝试使用引导程序创建 HTML 表单。当我不调整浏览器大小时，我的代码可以完美运行。一旦我调整浏览器大小，tr 响应就会失败。 在下面的 sn-p 中，我为标签和文本区域标签使用了内联 css 样式。因此，当我调整浏览器大小时，它们无法正确对齐，因为其他元素使用引导程序的响应功能对齐。
尝试应用几个网格类但仍然无法正常工作。关于如何解决这个问题的任何想法？
代码片段：
<!-- Form starting -->
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">Project Details</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool"
data-widget="collapse">
<i class="fa fa-minus"></i>
</button>
</div>
</div>
<!-- /.box-header -->
<!-- box body -->
<div class="box-body" style="margin-left: 15px;">
<div class="row">
<form role="form" class="form-horizontal">
<!-- left side -->
<div class="col-md-6">
<div class="form-group">
<label for="inputProjectID" class="col-sm-3 control-label">
Project ID</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputProjectID"
placeholder="Project ID" tabindex="1">
</div>
</div>
<div class="form-group">
<label for="inputReleaseDate" class="col-sm-3 control-label">Release
Date </label>
<div class="col-sm-8">
<input type="text" class="form-control" id="datepicker"
placeholder="Release Date (mm/dd/yyyy)" tabindex="3">
</div>
</div>
</div>
<!-- left side ends -->
<!-- right side -->
<div class="col-md-6">
<div class="form-group">
<label for="inputProjectName" class="col-sm-3 control-label">Project
Name</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputProjectName"
placeholder="Project Name" tabindex="2 ">
</div>
</div>
<div class="form-group">
<label for="inputSupervisor" class="col-sm-3 control-label">Supervisor
</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputSupervisor"
placeholder="Supervisor" tabindex="4">
</div>
</div>
</div>
<!-- right side ends -->
<!-- Form continues -->
<div class="col-md-12">
<div class="form-group">
<label for="projectDesc" style="margin-left:-46px;"
class="col-sm-2 control-label">Project Description</label>
<div class="col-md-10 col-sm-8">
<textarea style="resize: none;" class="form-control" rows="3" placeholder="Enter the Project Description" tabindex="5"></textarea>
</div>
</div>
</div>
</form>
<!-- /.form-group -->
</div>
<!-- /.row -->
</div>
<!-- /.box body ends -->
</div>
<!-- /.box-primary ends -->【问题讨论】：
-
你能把这段代码放在小提琴上吗？
-
没有失败，是因为你设置了 margin-left: 为 -46px no?
-
@Obink 是的，这就是我用来与顶部标签对齐的内联 css
-
我认为这不是对齐方式@JestinoSam。那么你的问题是什么。
标签： html css user-interface twitter-bootstrap-3