如何在两个超大屏幕之间放置一个字形图标？

Question

基本上我想在两个超大屏幕之间放置字形图标。这是我的代码。不确定为什么箭头进入下一行或在超大屏幕的末尾。

<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

试试这个

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

如果你想要垂直对齐你必须添加一些弹性

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

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

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

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

更新如果你的超大屏幕总是在同一行，我会在容器上使用 display: table 并在内部容器上使用 display: table-cell 以便箭头可以设置为 垂直对齐：中间。另一种动态方法是将字形图标移到最后一个超大屏幕并将其位置设置为绝对位置并将其左侧移动到 0，顶部移动到 45%；

如何在两个超大屏幕之间放置一个字形图标？

How to put a glyphicon between two jumbotrons?

html

css

twitter-bootstrap

glyphicons