Adam R. Grey Adam R. Grey - 2 months ago 4
CSS Question

Where are my HRs?

For some reason bootstrap's CSS manages to hide some (but not all) of my

hr
s at certain
width
s.

If you go to This fiddle and expand the output pane to be wide enough, you'll notice that the
hr
s between "attachment", "add attachment", and "Department" all vanish. Why?

How can I get them to show up at any
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>




Answer

It is because when not in smaller views (xs) the classes uses float:left

so the hr is being used after those classes, therefore must cleared before.

you can use bootstrap class clearfix for that

.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>