Question

<div style="display:inline-block">
usernad <span class="glyphicon glyphicon-user"></span> ape<br>
dads <span class="glyphicon glyphicon-user"></span> stack<br>
defdood <span class="glyphicon glyphicon-user"></span> rocks<br>
eleminem <span class="glyphicon glyphicon-user"></span> boom<br>
</div>
<div style="display:inline-block">
te43st@gmail.com <span class="glyphicon glyphicon-envelope"></span> tester32<br>
te44st@gmail.com <span class="glyphicon glyphicon-envelope"></span> fourteenppl<br>
test32@gmail.com <span class="glyphicon glyphicon-envelope"></span> eleven<br>
test@gmail.com <span class="glyphicon glyphicon-envelope"></span> goo<br>
</div>

我尝试创建两列，每列都有这种格式的行：text glyphicon text，但我想在直线上垂直对齐字形，以便于阅读。有没有办法用Bootstrap做到这一点？

Answer 1

您必须使用span然后float包装文本，并在每个项目中清除它。您需要使用min-width

在对话形象之前右对齐文字就是我想说的。

然后使用text-align:right

div {
  display: inline-block;
  border: dotted 1px red;
  vertical-align: middle;
  padding: 5px
}
div span {
  float: left
}
div span:nth-of-type(3n+1) {
  clear: left;
  text-align: right
}
div:first-of-type span:nth-of-type(3n+1) {
  min-width: 70px;
}
div:last-of-type span:nth-of-type(3n+1) {
  min-width: 120px
}
.glyphicon {
  margin: 2px 5px
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div>
  <span> usernad</span>  <span class="glyphicon glyphicon-user"></span><span> ape </span>
  <span>dads</span>  <span class="glyphicon glyphicon-user"></span>  <span>stack</span>
  <span>defdood</span>  <span class="glyphicon glyphicon-user"></span>  <span>rocks</span>
  <span>eleminem </span><span class="glyphicon glyphicon-user"></span><span> boom</span>
</div>
<div>
  <span> te43st@gmail.com</span>  <span class="glyphicon glyphicon-envelope"></span>  <span>tester32</span>
  <span>te44st@gmail.com</span>  <span class="glyphicon glyphicon-envelope"></span><span>fourteenppl</span>
  <span>test32@gmail.com</span>  <span class="glyphicon glyphicon-envelope"></span>  <span>eleven</span>
  <span>test@gmail.com</span>  <span class="glyphicon glyphicon-envelope"></span>  <span>goo</span>
</div>

Answer 2

我不认为这可以通过本机引导来完成，但是如果你使你的图标跨越内联块，你可以对它应用vertical-align（我在样本中使用了top）

div {
  font-size:15px;
  line-height:32px;
}
span.glyphicon
{
  display:inline-block;
  vertical-align:top;
}

我已经让jsfiddle显示了对齐方式;我还增加了线高，以便直观地说明。

垂直对齐Bootstrap glyphicons和两边的文本？

2 个答案: