javascript - 动态创建的 Bootstrap 按钮丢失空间填充

Question

我有一个使用 well 类的 Bootstrap 按钮栏，在我的代码中重复了两次:一个是使用 HTML 代码创建的，另一个是使用动态 javascript 创建的。

当我使用 HTML 时， Bootstrap 工作正常。

当我使用 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);

Fiddle

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

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

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

Fiddle