Элемент hr рядом с другим полноразмерным элементом (начальная загрузка 3.3.7)

Question

Я хочу получить элемент <hr> рядом с моими значками, я установил стиль отображения на .inline-grid, чтобы элемент hr оставался рядом с моими значками. Проблема в том, что мне нужно задать ему ширину, потому что inline-grid принимает его в натуральную величину.

Как элемент 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> должен оставаться горизонтальным. (Иконка горизонтальная линия Иконка) <= это должно занять всю ширину строки. </p>

Edit2: неправильная версия начальной загрузки в отрезанном виде. Изменено на 3.3.7.

Answer 1

Вместо отображения inline-grid используйте display 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>

Answer 2

Вы можете попробовать это:

<div class="row">
<span style="cursor: pointer">
  <span class="glyphicon glyphicon-chevron-down">V</span>
  <hr class="m-0 pl-3 pr-3">
  <span class="glyphicon glyphicon-chevron-down">V</span>
</span>

Answer 3

Установить эти свойства в стиле vertical-align: middle; margin: 0;