私のHRはどこですか？

Question

何らかの理由で、ブートストラップのCSSが、私のhrのいくつか（しかしすべてではない）を特定のwidthで隠すことを管理しています。

このfiddleに移動し、出力ペインを十分に広げると、「添付ファイル」と「添付ファイル」と「部門」の間のhrはすべて消滅します。どうして？

どのように表示されるのですか？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 1

のでfloat:left

を使用しないときは小さなビュー（xs）のクラスhrがゆえの前にクリアしなければならない、これらのクラスの後に使用されているからです。

ます。これは、ブートストラップフレームワーク（私はちょっと、ブートストラップを使用して嫌い理由の一つ）のちょうど別の落とし穴であること

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

Answer 2

のためのブートストラップクラスclearfixを使用することができます。

アプリケーションにブートストラップが含まれている場合、スタイルはbootstrap.cssで、自発的に/強制的にHTML要素を上書きします。これはまさにあなたの<hr>タグに起こったことです。ブラウザのデバッガに表示されているように、人事部はbootstrap.css行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それにもかかわらず、私は、セパレータの効果を得るためにborder-bottomかそこらのような性質を利用して<hr> &スタートを使用していないお勧めします、この場合には、問題を引き起こしています。