动态创建的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 谢谢您的帮助。

- Mendes

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

：这是一个指向 http://jsfiddle.net/B4Rp5/ 的链接。

- Anthony Chu

---

抱歉，我无法在HTML代码中看到原始按钮之间的空格...这是从哪里来的？ - Mendes

@Mendez 请注意你的按钮是在不同的行上吗？换行符（和制表符）被视为空格。 - Jonathan Wilson

标记中每个按钮之间有一个新行和一些空格/制表符。 - Anthony Chu

但是当我动态创建时，我不是添加了相同的换行符吗？如果我查看浏览器代码，它们完全相同... - Mendes

在检查DOM时，它们可能看起来相同。在Chrome中，右键单击包围动态生成按钮的div并编辑为HTML，以查看实际生成的HTML。您会发现按钮之间没有任何内容。 - Anthony Chu

对我来说，问题在于使用<li><a...</li>动态生成的HTML没有空格，但是这段代码被插入的原始HTML由于缩进而有空格。通过在JS中在li前后添加一个空格来解决这个问题。 - Dylan Valade

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> 动态生成的代码：

按钮1按钮2按钮3

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

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

- amol