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