Bootstrap link 跨度重叠 div

Question

我有这个简单的用户配置文件 -https://jsfiddle.net/mt15199/fgogetrh/ 我想把信封图标拉到左边，所以我把它放在 span 元素上并添加了一个 class pull-left 但是图标掉落并覆盖了容器。如果没有这个向左拉 class 的 span 元素，信封图标和其他位于 div.

内的图标

我该如何解决这个问题？

                    <span class="pull-left"> 
                <a data-original-title="Broadcast Message" data-toggle="tooltip" type="button" class="btn btn-sm btn-primary"><i class="glyphicon glyphicon-envelope"></i></a>
            </span>

Answer 1

无论何时使用 float，都不要忘记使用 clear，否则元素会重叠。

见demo

在浮动元素

之后使用clearfixclass或clear:both;

使用

<div class="clearfix"></div>

或

<div style="clear:both;"></div>

第一个示例来自 bootstrap，与第二个示例具有相同的样式。

Bootstrap link 跨度重叠 div

Bootstrap link within span overlap div

css

sass

css-float

twitter-bootstrap-3