动态创建的引导按钮会丢失空间填充

Question

我有一个引导按钮栏,使用well我的代码中重复两次的类:一个使用HTML代码创建,另一个使用动态javascript.

当我使用HTML时,引导程序工作正常.

我使用javascript创建它,按钮失去填充.

我期望的结果在两个代码中是相同的.

为什么动态创建的不符合HTML创建的原始水平间距？

有没有人可以帮助我.

Original code:

<div class="well">
    <button type="button" class="btn btn-primary btn-xs">Button 1</button>
    <button type="button" class="btn btn-primary btn-xs">Button 2</button>
    <button type="button" class="btn btn-primary btn-xs">Button 3</button>
    <small class="pull-right">Right Text</small>
</div>


<div id="myMenu">
</div>

<script type="text/javascript">

    $(document).ready(function () {

        var upperWell = $("<div class='well clearfix'>");

        $('#myMenu').append(upperWell);

        var createButton = $("<button type='button' class='btn btn-primary btn-xs'>Button1</button>");

        var updateButton = $("<button type='button' class='btn btn-primary btn-xs'>Button 2</button>");

        var exportButton = $("<button type='button' class='btn btn-primary btn-xs'>Button 3</button>");

        $(upperWell).append(createButton);
        $(upperWell).append(updateButton);
        $(upperWell).append(exportButton);

    });

</script>

JsFiddle在这里:

的jsfiddle

感谢帮助.

Answer 1

静态按钮之间有空格,附加的按钮则没有.你可以在每个按钮之间添加一个空格......

$(upperWell).append(createButton).append(" ");
$(upperWell).append(updateButton).append(" ");
$(upperWell).append(exportButton);

小提琴

或者你可以在每个按钮添加后添加一个空格......

$(upperWell).append(createButton);
$(upperWell).append(updateButton);
$(upperWell).append(exportButton);

$("#myMenu button").after(" ");

小提琴