Bootstrap 3.3.5 字形问题

Question

我有这个代码：

<p>
    <span class="glyphicon glyphicon-map-marker"></span>
    The Old Steam House, Unit 10, Goblands Farm, Cemetery Lane, Hadlow, Kent, TN11 0LT
</p>

这样的输出，很好。

但是，在手机上看起来像这样

How/what 是像这样一直向下缩进文本的最佳方式

如果这不是一个好问题，我深表歉意，我以前从未使用过Bootstrap。

Answer 1

正如我在评论中所说，bootstrap 无法解决此类情况。

您可以使用 padding-left: [value] ，其中 value 是您想要的字体大小 + 间距。

HTML（已更改 "p"，因为 "div" 不能是 "p" 的子代）：

<div>
    <span class="glyphicon glyphicon-map-marker pull-left"></span>
    <p class="padded-box">The Old Steam House, Unit 10, Goblands Farm, Cemetery Lane, Hadlow, Kent, TN11 0LT</p>
</div>

CSS:

/* this selector is just for example */
div {
    font-size: 18px;
}

.padded-box {
    padding-left: 23px /* 18px + 5px for spacing */ 
}

这里是 fiddle：http://jsfiddle.net/dkcw54wy/

Answer 2

字形上的负左边距应该有效。

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css");

.multiline-margin {
    margin: 0 0 0 20px;
}

.multiline-margin > .glyphicon {
    margin: 0 0 0 -20px;
}

<p class="multiline-margin">
  <span class="glyphicon glyphicon-map-marker"></span>
  The Old Steam House, Unit 10, Goblands Farm, Cemetery Lane, Hadlow, Kent, TN11 0LT
</p>

Bootstrap 3.3.5 字形问题

Bootstrap 3.3.5 glyphicon issues

css

twitter-bootstrap

glyphicons