由于某些原因，bootstrap的CSS设法在某些hr隐藏了width的某些（但不是全部）。
如果您转到此fiddle并将输出窗格展开得足够宽，则会注意到hr介于＆＃34;附件＆＃34;，＆＃34之间;添加附件＆＃34;和＆＃34;部门＆＃34;一切都消失了。为什么？
如何让它们显示在任何width？
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="body-content">
<form action="/Reports/Edit/5" method="post" novalidate="novalidate"> <div class="form-horizontal">
<h4>Report</h4>
<hr>
<div class="form-group">
<label class="control-label col-md-2" for="ShortageFilledDate">Date Shortage Filled</label>
<div class="col-md-10">
<input name="ShortageFilledDate" class="form-control text-box single-line" id="ShortageFilledDate" type="datetime" value="" data-val="true" data-val-date="The field Date Shortage Filled must be a date.">
<span class="field-validation-valid text-danger" data-valmsg-replace="true" data-valmsg-for="ShortageFilledDate"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="ReplanClosedDate">Date Replan Closed</label>
<div class="col-md-10">
<input name="ReplanClosedDate" class="form-control text-box single-line" id="ReplanClosedDate" type="datetime" value="" data-val="true" data-val-date="The field Date Replan Closed must be a date.">
<span class="field-validation-valid text-danger" data-valmsg-replace="true" data-valmsg-for="ReplanClosedDate"></span>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input class="btn btn-default" type="submit" value="Save">
</div>
</div>
</div>
</form>
<hr>
<div class="col-md-2">attachment:</div><div class="col-md-10"><a href="/files/d460e9b3-14c2-485e-88e3-2fba3de4863a.png">logo.png</a></div>
<hr>
<form action="/Reports/AddAttachment" enctype="multipart/form-data" method="post"><input name="reportId" id="reportId" type="hidden" value="5"> <div class="form-group">
<label class="control-label col-md-2" for="Add_Attachment">Add Attachment</label>
<div class="col-md-10">
<input name="upload" id="attachment" type="file">
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input class="btn btn-default" type="submit" value="Upload Attachment">
</div>
</div>
</form>
<hr>
<form action="/Reports/SendToDepartment" method="post"><input name="ReportId" id="ReportId" type="hidden" value="5"> <div class="form-group">
<label class="control-label col-md-2" for="Department">Department</label>
<div class="col-md-10">
<select name="Department" class="form-control" id="Department"><option value="">Select Next Department Location</option>
<option value="0">Production</option>
<option value="1">DMRClerk</option>
<option value="2">QualityEngineer</option>
<option value="3">Stockroom</option>
<option value="4">Purchasing</option>
<option value="5">Shipping</option>
<option value="6">Archive</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="Comments">Comments</label>
<div class="col-md-10">
<textarea name="Comments" id="Comments" rows="3" cols="200"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input class="btn btn-default" type="submit" value="Send to Department">
</div>
</div>
</form>
<div>
<a href="/">Back to List</a>
</div>
<hr>
<footer>
<p class="text-center">© 2016</p>
</footer>
</div>
</body>
答案 0 :(得分：2)
这是因为当不在较小的视图中（xs）时，这些类使用float:left
因此hr在这些类之后被使用，因此必须在之前清除。
你可以使用bootstrap类clearfix来实现
.body-content hr {
border-color: red
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<body>
<div class="body-content">
<form action="/Reports/Edit/5" method="post" novalidate="novalidate">
<div class="form-horizontal">
<h4>Report</h4>
<hr>
<div class="form-group">
<label class="control-label col-md-2" for="ShortageFilledDate">Date Shortage Filled</label>
<div class="col-md-10">
<input name="ShortageFilledDate" class="form-control text-box single-line" id="ShortageFilledDate" type="datetime" value="" data-val="true" data-val-date="The field Date Shortage Filled must be a date.">
<span class="field-validation-valid text-danger" data-valmsg-replace="true" data-valmsg-for="ShortageFilledDate"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="ReplanClosedDate">Date Replan Closed</label>
<div class="col-md-10">
<input name="ReplanClosedDate" class="form-control text-box single-line" id="ReplanClosedDate" type="datetime" value="" data-val="true" data-val-date="The field Date Replan Closed must be a date.">
<span class="field-validation-valid text-danger" data-valmsg-replace="true" data-valmsg-for="ReplanClosedDate"></span>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input class="btn btn-default" type="submit" value="Save">
</div>
</div>
</div>
</form>
<hr>
<div class="col-md-2">attachment:</div>
<div class="col-md-10"><a href="/files/d460e9b3-14c2-485e-88e3-2fba3de4863a.png">logo.png</a>
</div>
<div class="clearfix"></div>
<hr>
<form action="/Reports/AddAttachment" enctype="multipart/form-data" method="post">
<input name="reportId" id="reportId" type="hidden" value="5">
<div class="form-group">
<label class="control-label col-md-2" for="Add_Attachment">Add Attachment</label>
<div class="col-md-10">
<input name="upload" id="attachment" type="file">
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input class="btn btn-default" type="submit" value="Upload Attachment">
</div>
</div>
</form>
<div class="clearfix"></div>
<hr>
<form action="/Reports/SendToDepartment" method="post">
<input name="ReportId" id="ReportId" type="hidden" value="5">
<div class="form-group">
<label class="control-label col-md-2" for="Department">Department</label>
<div class="col-md-10">
<select name="Department" class="form-control" id="Department">
<option value="">Select Next Department Location</option>
<option value="0">Production</option>
<option value="1">DMRClerk</option>
<option value="2">QualityEngineer</option>
<option value="3">Stockroom</option>
<option value="4">Purchasing</option>
<option value="5">Shipping</option>
<option value="6">Archive</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="Comments">Comments</label>
<div class="col-md-10">
<textarea name="Comments" id="Comments" rows="3" cols="200"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input class="btn btn-default" type="submit" value="Send to Department">
</div>
</div>
</form>
<div>
<a href="/">Back to List</a>
</div>
<hr>
<footer>
<p class="text-center">© 2016</p>
</footer>
</div>
<script src="Scripts/jquery-1.10.2.js"></script>
<script src="Scripts/bootstrap.js"></script>
</body>
答案 1 :(得分：0)
这只是bootstrap框架的另一个缺陷（我讨厌使用bootstrap的原因之一）。
当应用程序中包含bootstrap时，bootstrap.css 中的样式会自动/非自愿地覆盖您的HTML元素。这正是您的<hr>代码发生的情况。正如您在浏览器调试器中看到的，您的HR现在将具有来自 bootstrap.css line 1140 的以下代码。
//coming from bootstrap.css line:1140
hr {
margin-top: 20px;
margin-bottom: 20px;
border: 0; //this is causing the issue
border-top: 1px solid #eee;
}
//coming from bootstrap.css line:1140
border: 0在这种情况下导致问题，但我建议不要使用<hr>＆amp;开始使用border-bottom等属性来获得分隔符效果。