html - 一个 hr 元素位于另一个全尺寸元素旁边(bootstrap 3.3.7)

Question

我想要<hr>我的图标旁边的元素，我将显示样式设置为 .inline-grid让 hr 元素保留在我的图标旁边。 问题是我需要给它一个宽度，因为内联网格需要它的全尺寸宽度。

hr 元素怎样才能是全尺寸并且仍然位于图标之间？

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
    <div class="container">
      <div class="row">
        <span style="cursor: pointer">
          <span class="glyphicon glyphicon-chevron-down"></span>
          <hr style="width: 100px;margin-left: 0px;margin-right: 0px;display: inline-grid;margin-bottom: 0px;"/>
          <span class="glyphicon glyphicon-chevron-down"></span>
        </span>
      </div>
    </div>

---

编辑:<hr>元素应该仍然是水平的。 (图标水平线图标)<=这应该占据完整的行宽度。

Edit2:截图中的 Bootstrap 版本错误。更改为3.3.7。

Answer 1

使用显示 Flex 来代替显示内联网格。

hr {
  flex:1;
}

.wrapper {
  cursor: pointer;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="wrapper d-flex justify-content-center align-items-center">
      <span class="glyphicon glyphicon-chevron-down">V</span>
      <hr/>
      <span class="glyphicon glyphicon-chevron-down">V</span>
    </div>
  </div>
</div>