Question

我正在使用Twitter Bootstrap的CSS框架。在每个页面的顶部，我有一个操作栏，其中包含一些执行某些常见任务的按钮，其中一些是从左侧水平堆叠的普通inline-block按钮，而其他按钮则获得pull-right类，因为他们应该在右边。

当我静态地执行这种解决方案时，一切都很好，正如我在第一个小提琴中展示的那样：http://jsfiddle.net/2mj58m86/。没有浮动的按钮位于左侧，而带有.pull-left的按钮位于右侧。

但是当我使用jQuery动态添加“左”按钮时，只有在Chrome和Chromium中，新按钮才会按下右键。它们的行为就好像它们分别是block text-align和left right元素。此行为在第二个小提琴中展示：http://jsfiddle.net/2mj58m86/1/

这是我个人第一次遇到浏览器在动态添加元素时对待CSS的情况。这是一个Webkit错误，还是我做错了什么？

请注意，这在Firefox中不会发生。

Answer 1

尝试在append上使用prepend。

$('.well').append('<span class="btn btn-info">button one</span>');

这会使它工作正常。这是小提琴：http://jsfiddle.net/2mj58m86/4/

Answer 2

使用引导网格系统。

<div class="clearfix well">
    <div class="row">
        <div class="col-sm-6">
            <span class="btn btn-info pull-right">button two</span>
        </div>
    </div>
</div>

$('.well').prepend('<div class="col-sm-6"><span class="btn btn-info pull-left">button one</span></div>');

http://jsfiddle.net/2mj58m86/2/

Answer 3

您可以将CSS中的.btn-info更改为float: left，这是您可以使用的另一种方式.pull-left

当通过jQuery预先添加时，Chrome会对元素的CSS进行不同的处理

3 个答案: