Bootstrap 以一种奇怪的方式定位 <hr> 行答案

【问题标题】：Bootstrap positions <hr> line in an odd wayBootstrap 以一种奇怪的方式定位 <hr> 行
【发布时间】：2018-03-15 21:40:26
【问题描述】：

在这里提琴：https://jsfiddle.net/mv5ut6sw/

我的网页顶部有一个链接列表，包含在<div> 中。我想在这个<div> 的上方和下方有一条水平的<hr> 线，以便在视觉上将链接与页面的其余部分分开。简化示例：

<hr>
<div style="float:left; width:100%">
    <div style="float:left; margin-right:20px">
      <ul>
        <li><a href="/link1">Link1</a></li>
        <li><a href="/link2">Link2</a></li>
      </ul>
    </div>
    <div style="float:left; margin-right:20px">
      <ul>
        <li><a href="/link3">Link3</a></li>
        <li><a href="/link4">Link4</a></li>
      </ul>
    </div>
</div>
<hr>

我正在使用引导程序来美化页面。如果没有引导程序，<hr>s 会按预期运行，出现在链接部分的上方和下方。但是，当我使用引导程序时，两条水平线都出现在链接部分的上方。

我很茫然。我不想编辑引导代码。是否可以包含内联 css 来修复这个奇怪的位置？

【问题讨论】：

请查看：stackoverflow.com/questions/11577712/…

标签： html css bootstrap-4

【解决方案1】：

这是因为浮点数将元素从流中取出...您可以清除浮点值 clear:both 或在父 div 中应用 overflow:hidden...

如果您使用的是 bootstrap4 那么为什么要使用 floats...只需在父 div 上使用 d-flex 类

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<body>
  <h3 style="background-color: lightgray; height: 40px; padding: 2px">
    Ye old title
  </h3>
  <hr>
  <div class="d-flex">
    <ul>
      <li><a href="/go/entry">Race Entry</a></li>
      <li><a href="/go">Start</a></li>
      <li><a href="/go/transfer">Position Transfer</a></li>
      <li><a href="/contracts">Contracts</a></li>
    </ul>
    <ul>
      <li><a href="/statement">Statements</a></li>
      <li><a href="/position">Race Position</a></li>
      <li><a href="/firm">Advertising Firm</a></li>
    </ul>
    <ul>
      <li><a href="/report1">Report1</a></li>
      <li><a href="/report2">Report2</a></li>
    </ul>
    <ul>
      <li><a href="/settleit">Settle it!</a></li>
      <li><a href="/upload">Upload</a></li>
      <li><a href="/search">Search</a></li>
    </ul>
  </div>
  <hr>
</body>

【讨论】：

【解决方案2】：

“我可以包含内联 css 来修复这个奇怪的位置吗？”

这是因为浮动。只需清除最后一个<hr>..

<hr style="clear:both;">

https://jsfiddle.net/s9L0Lf9b/

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<body>
<h3 style="background-color: lightgray; height: 40px; padding: 2px">
   Ye old title
</h3>
<hr>
  <div style="float:left; width:100%;">
    <div style="float:left; margin-right:20px">
      <ul>
        <li><a href="/go/entry">Race Entry</a></li>
        <li><a href="/go">Start</a></li>
        <li><a href="/go/transfer">Position Transfer</a></li>
        <li><a href="/contracts">Contracts</a></li>
      </ul>
    </div>
    <div style="float:left; margin-right:20px">
      <ul>
        <li><a href="/statement">Statements</a></li>
        <li><a href="/position">Race Position</a></li>
        <li><a href="/firm">Advertising Firm</a></li>
      </ul>
    </div>
    <div style="float:left; margin-right:20px">
      <ul>
        <li><a href="/report1">Report1</a></li>
        <li><a href="/report2">Report2</a></li>
      </ul>
    </div>
    <div style="float:left; margin-right:20px">
      <ul>
        <li><a href="/settleit">Settle it!</a></li>
        <li><a href="/upload">Upload</a></li>
        <li><a href="/search">Search</a></li>
      </ul>
    </div>
  </div>
<hr style="clear:both;">
  </body>

"float CSS 属性指定一个元素应该取自正常流动并沿其左侧或右侧放置容器，文本和内联元素将环绕它。” __ from MDN posted on a related question

附： - 没有必要在 Bootstrap 4 中使用浮点数。

【讨论】：