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

【问题标题】：Dynamically created bootstrap buttons lose space padding动态创建的引导按钮丢失空间填充
【发布时间】：2014-06-28 08:14:54
【问题描述】：

我有一个使用 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

感谢您的帮助。

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案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

【讨论】：

对不起，我在 HTML 代码中看不到原始按钮之间的空格...这是从哪里来的？
@Mendez 注意你的按钮是如何在不同的行上的？新行（和制表符）算作空白。
标记中的每个按钮之间有一个新行和一些空格/制表符。
但是我在动态创建时没有添加与空白相同的新行吗？如果我查看浏览器代码，它们完全一样......
在检查 DOM 时它们可能会显示相同。在 Chrome 中，右键单击动态生成的按钮周围的 div 并编辑为 HTML 以查看实际生成的 HTML。您会看到按钮之间没有任何内容。

【解决方案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; }

【讨论】：