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

【问题标题】：Bootstrap 4 - put small element between two long in a row without gapsBootstrap 4 - 将小元素连续放置在两个长之间，没有间隙
【发布时间】：2017-08-26 02:37:52
【问题描述】：

我想让它看起来像这样。

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 会有所帮助吗？

【问题讨论】：

标签： html css frontend twitter-bootstrap-4

【解决方案1】：

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

我对你的 codepen 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>

【讨论】：