Bootstrap 在列中间有图标答案

【问题标题】：Bootstrap have icon in the middle of columnBootstrap 在列中间有图标
【发布时间】：2018-10-19 14:31:53
【问题描述】：

我正在尝试构建一个左侧为黑色，右侧为红色的网站部分。就在中间，我需要在字体真棒中放置一个雪佛龙。雪佛龙位于黑色和红色上。

我现在的代码如下：

<div class="container-fluid" id="banner">
 <div class="row home">
  <div class="col-md-5 d-flex justify-content-end home-region-left align-items-center">
   <h2>Directions</h2>
 </div>
 <div class="col-md-2">
  <%= fa_icon 'chevron-circle-right'%>
 </div>
 <div class="col-md-5 d-flex justify-content-start home-region-right align-items-center">
  <%= form_tag zipcode_path, method: 'get', validate: true do%>
     <p><%=number_field :search, params[:search], required: true%>
        <%=submit_tag 'Search', class: 'btn btn-primary'
     </p>
  <% end %>
 </div>
</div>

这不起作用。对于初学者来说，中间部分占用了太多空间。

我已经做了几次尝试，但无法弄清楚如何在中间放置一个图标。这是我的jsfiddle

【问题讨论】：

你想让它覆盖黑色和红色？
你能展示一张你期望的输出图片吗？你不能只对总和为 100% 的左、中和右 div 使用 % width 并使用这些值吗？当您使用 col-md-X 时，它只是根据该值设置一个固定的 % 宽度并浮动元素。使用自定义 % 值，您应该完成了。

标签： html css ruby-on-rails twitter-bootstrap

【解决方案1】：

这样的？

使用 position: absolute 并将 div 居中：

<div class="container-fluid">
  <div class="row chevron">
    <div class="col left-side">
        Left
    </div>
    <div style="z-index: 1000; position: absolute; left: 50%; right: 50%; margin-top: 10px; margin-left: -10px; background: blue; width: 20px; text-align: center;">
      >
    </div>
    <div class="col right-side">
         Right
    </div>
  </div>
</div>

你更新的小提琴是here。

【讨论】：

这几乎正是我想要的。