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

【问题标题】：How to put a glyphicon between two jumbotrons?如何在两个大屏幕之间放置一个字形图标？
【发布时间】：2016-03-12 21:02:44
【问题描述】：

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

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

【问题讨论】：

你想把你的图标放在中间，但是为什么你把你的 span 放在 jumbotron div 之一呢？

标签： css html twitter-bootstrap glyphicons

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

【讨论】：

【解决方案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 并在内部容器上使用 display: table-cell 以便箭头可以设置为 vertical-align: middle强>。另一种动态方法是将 glyphicon 移动到最后一个 jumbotron 并将其位置设置为绝对并将其向左移动到 0 和顶部到 45%；

【讨论】：