Bootstrap 3: 对齐图标和文字时没有换行

Bootstrap 3: no line break when aligning icons and text

使用 Bootstrap 3,我试图水平对齐两个按钮(分别左对齐和右对齐),中间有一个字形图标。现在我只能在使用

元素作为字形图标时对齐它们,这会导致所有三个元素出现在不同的行上。如何让三者水平排列,同时保持左、中、右位置?

我已经看到 similar questions 问过,并且一直在尝试在 CSS 中实施 text: nowrap; 但没有成功。

<div class="col-xs-10 col-xs-offset-1">
  <button type="button" class="btn btn-primary btn-lg" id="por-btn">por</button>

  <p class="text-center"><span class="glyphicon glyphicon-ok-sign"></span></p> 

  <button type="button" class="btn btn-primary pull-right btn-lg" id="para-btn">para</button>
</div>

Flexbox 在这里可以提供很大的帮助:

.horizontalAlign{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
<div class="col-xs-10 col-xs-offset-1 horizontalAlign">
  <button type="button" class="btn btn-primary btn-lg" id="por-btn">tall<br>button<br>is<br>here</button>

  <p class="text-center">icon is here</span></p> 

  <button type="button" class="btn btn-primary pull-right btn-lg" id="para-btn">everything is centered</button>
</div>

P.S.: 段落标签可以是任何东西(例如所需的fa-icon)我只是想显示定位。

Flexbox 解决方案很棒,但您也可以通过这种方式水平对齐项目

.valign{
line-height:46px;
vertical-align:middle;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
<div class="col-xs-10 col-xs-offset-1">
<div class="row">
<div class="col-xs-4">
  <button type="button" class="btn btn-primary btn-lg" id="por-btn">por</button>
</div>
<div class="col-xs-4 text-center valign">
  <span class="glyphicon glyphicon-ok-sign"></span> 
</div>
<div class="col-xs-4">
  <button type="button" class="btn btn-primary pull-right btn-lg" id="para-btn">para</button>
  </div>
  </div>
</div>