Bootstrap 4 - 将小元素放在两个长的连续之间，没有间隙

Question

我想让它看起来与此相似。

hr  {
  border: none; 
  color: black; 
  background-color: black; 
  height: 5px;
  margin-top: 10px;
}


  <div class="row code-line">
    <div class="col-5">
      <div class="line-left">
        <hr>
      </div>
    </div>
    <div class="col-1">
      <i class="fa fa-code fa-2x" aria-hidden="true"></i>
    </div>
    <div class="col-5">
     <div class="line-right">
        <hr>
      </div>
    </div>
  </div> 

（fa-code是Font-Awesome图标）

Codepen：https://codepen.io/Oktocorp/pen/yMxpwX?editors=1100

我不知道如何使其对称和响应（长线在调整大小时应该变小）。也许，使用flexbox可能会有所帮助？

Answer 1

＆＃13;

＆＃13;

.hr_line{
  border: 3px solid #eee;
}
.arrow_indicate{
  margin: 10px 0px;
}
.row_right{
  padding-right: 0px!important;
}
.row_left{
  padding-left: 0px!important;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-xs-12">
<div class="col-xs-5 row_right">
<hr class="row hr_line"/>
</div>
<div class="col-xs-2">
<div class="row text-center arrow_indicate">
<i class="fa fa-code fa-2x" aria-hidden="true"></i>
</div>
</div>
<div class="col-xs-5 row_left">
<hr class="row hr_line"/>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我会选择更简单的标记：

 <div class="centered-separator">
   <i class="fa fa-code fa-2x"></i>
 </div>

只需将它放在您选择的容器中即可拉伸。 方法如下：

.centered-separator {
  display: flex;
  align-items: center;
  color: #999;
}
.centered-separator > * {
  margin: 0 1rem;
}
.centered-separator::before,
.centered-separator::after {
  height: 2px;
  width: 100%;
  display: block;
  background-color: #999;
  content: '';
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>


<div class="centered-separator">
    <i class="fa fa-code fa-2x"></i>
</div> 

Answer 3

我快速编写了你的​​codepen this并实现了一些简单的flex来实现你想要的东西。诀窍是删除<hr />并使用<div> s。

＆＃13;

＆＃13;

.row {
  background-color: yellow;
  display: flex;
}

.row > div.hr {
  flex: 1 1 auto;
}

.row > div.hr-icon {
  flex: 0 1 auto;
  padding: 12px;
}

.row > div {
  align-self: center;
}

.hr {
  border: none; /* Убираем границу для браузера Firefox */
  color: red; /* Цвет линии для остальных браузеров */
  background-color: red; /* Цвет линии для браузера Firefox и Opera */
  height: 5px;
}

＆＃13;

<div class="container">
  <div class="row">
    <div class="hr"></div>
    <div class="hr-icon">
      <i class="fa fa-code fa-2x" aria-hidden="true"></i>
    </div>
    <div class="hr"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;