Bootstrap 3.3.5 glyphicon问题

Question

我有这段代码：

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

这样的输出，这很好。

然而，在移动设备上它看起来像这样

如何/最好的方式将文本一直缩进到这样的最佳方式

如果这不是一个很好的问题我很抱歉，我以前从未使用过Bootstrap。

Answer 1

glyphicon上的负左边距应该有效。

＆＃13;

＆＃13;

@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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

就像我在评论中所说，bootstrap并没有解决这种情况。

你可以做的是使用padding-left：[value]其中value是font-size +你想要的间距。

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 */ 
}

这是一个小提琴：http://jsfiddle.net/dkcw54wy/