文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >我的人力资源呢？

问我的人力资源呢？
EN

Stack Overflow用户
提问于 2016-09-20 14:09:43
回答 2查看 92关注 0票数 1

出于某种原因，引导程序的CSS能够在某些hr的width中隐藏一些(但不是全部)。

如果您转到这个小提琴并将输出窗格展开到足够宽的范围，您会注意到“附件”、“添加附件”和“部门”之间的hrs都消失了。为什么？

我怎样才能让他们出现在任何width

​

代码语言：javascript
复制
<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>

​

html
css
twitter-bootstrap
twitter-bootstrap-3
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-09-20 14:18:03

这是因为当不在较小的视图(xs)中时，类使用float:left

因此，hr是在这些类之后使用的，因此必须在此之前清除。

为此，可以使用引导类clearfix

​

代码语言：javascript
复制
.body-content hr {
  border-color: red
}
代码语言：javascript
复制
<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>

​

票数 2
EN

Stack Overflow用户

发布于 2016-09-20 14:21:21

这只是引导框架的另一个陷阱(这是我不喜欢使用引导程序的原因之一)。

当引导包含在应用程序中时，bootstrap.css 中的样式会自动/不由自主地重写您的HTML元素。这正是发生在您的<hr>标记上的情况。正如您在浏览器调试器中所看到的，您的HR现在将拥有来自bootstrap.css第1140行的以下代码。

代码语言：javascript
复制
//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> &开始使用border-bottom之类的属性来获得分隔符的效果。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/39596398

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档