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

Dynamically created bootstrap buttons lose space padding

本文关键字：失去 空间 填充 按钮 创建 动态      更新时间：2023-09-26

我有一个引导按钮栏使用well类在我的代码中重复两次:一个使用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

静态按钮之间有空格，附加按钮之间没有。你可以在每个按钮之间添加一个空格…

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

小提琴

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

$(upperWell).append(createButton);
$(upperWell).append(updateButton);
$(upperWell).append(exportButton);
$("#myMenu button").after(" ");

小提琴

当我们对任何元素应用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; }

相关文章：