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 图标）

代码笔：https://codepen.io/Oktocorp/pen/yMxpwX?editors=1100

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

Answer 1

我对你的代码笔做了一个快速的分支 here 并实现了一些简单的 flex 来实现你想要的。诀窍是删除 <hr /> 并使用 <div>s.

.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;
}

<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>

Answer 2

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

<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>

Answer 3

我会选择更简单的标记：

 <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>

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

Bootstrap 4 - put small element between two long in a row without gaps

html

css

frontend

twitter-bootstrap-4