如何在两个jumbotrons之间放一个glyphicon？

Question

基本上我想在两个jumbotrons之间使用glyphicon。这是我的代码。不确定为什么箭头会进入下一行或在jumbotrons的末尾。

<div class="container">
    <div class="jumbotron col-xs-2" style="padding: 10px; background-color:#4aca4a; color:white"><b>Step 1</b><br /> A company posts a project <span class="glyphicon glyphicon-arrow-right"></span></div>
    <div class="jumbotron col-xs-2 col-sm-offset-1" style="padding: 10px; background-color:#4aca4a; color:white"><b>Step 2</b><br /> Students apply for the project</div>

</div>

Answer 1

试试这个

＆＃13;

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="jumbotron col-xs-5" style="padding: 10px; background-color:#4aca4a; color:white"><b>Step 1</b><br /> A company posts a project </div>
  <div class="col-xs-2 text-center"><span class="glyphicon glyphicon-arrow-right"></span></div>
  <div class="jumbotron col-xs-5" style="padding: 10px; background-color:#4aca4a; color:white"><b>Step 2</b><br /> Students apply for the project</div>
</div>

＆＃13;

＆＃13;

＆＃13;

如果您想要垂直对齐，则必须添加一些flex

＆＃13;

＆＃13;

.container.flex {
  display: flex;
  align-items: center;
}

.container.flex .jumbotron {
  margin: 0;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet"/>


<div class="container flex">
  <div class="jumbotron col-xs-5" style="padding: 10px; background-color:#4aca4a; color:white"><b>Step 1</b><br /> A company posts a project </div>
  <div class="col-xs-2 text-center"><span class="glyphicon glyphicon-arrow-right"></span></div>
  <div class="jumbotron col-xs-5" style="padding: 10px; background-color:#4aca4a; color:white"><b>Step 2</b><br /> Students apply for the project</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

@Nenad的方法，但静态线高度低于。 JSFiddle：https://jsfiddle.net/401xtb4p/1/

<强> HTML

<div class="container">
  <div class="jumbotron col-xs-2 col-sm-3" style="padding: 10px; background-color:#4aca4a; color:white">
    <h3>Step 1</h3>
    <p>A company posts a project</p>
  </div>
  <div class="arrow-container col-xs-1">
    <span class="glyphicon glyphicon-arrow-right"></span>
  </div>
  <div class="jumbotron col-xs-2 col-sm-3" style="padding: 10px; background-color:#4aca4a; color:white">
    <h3>Step 2</h3>
    <p>Students apply for the project</p>
  </div>
</div>

<强> CSS

.jumbotron {
  margin-bottom: 0;
}

.arrow-container {
  text-align: center;
}

.arrow-container .glyphicon {
  color: #4aca4a;
  line-height: 6;
  font-size: 22px;
}

<强>更新 如果你的jumbotrons总是在同一行，我会在容器上使用display：table并显示：内部容器上的table-cell，以便箭头可以设置为 vertical-align：middle 。另一种动态方法是将glyphicon移动到最后一个jumbotron并将其位置设置为绝对位置并将其左移至0并将其移至最高45％;