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

Fiddle

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

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

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

Fiddle

Answer 2

当我们将display: inline-block;属性应用于任何元素时，两个元素之间存在小的差距。

请参阅此链接http://css-tricks.com/fighting-the-space-between-inline-block-elements/

但是如果元素之间没有空格（比如javascript创建的按钮），则不会显示空格。

在你的代码中，当按钮是由javascript创建的时，它在HTML代码中没有任何间距。

原始代码：

<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 class="well clearfix"><button type="button" class="btn btn-primary btn-xs">Button1</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></div>

要解决上述问题，您可以使用以下代码

#myMenu button { margin-right: 4px; }

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

2 个答案: