想要在按钮之间添加间距 [英] Want to add spacing between buttons

问题描述

我有一个简单的任务，就是在对话框中的按钮之间添加空格，就像下面的示例代码一样，该代码是从 http获得的://bootboxjs.com/examples.html .试想一下，此示例中有多个按钮.像保存，删除，取消，确认一样.

I have a simple task to add space between buttons in a dialog box like in the example code below obtained from http://bootboxjs.com/examples.html. Just imagine that there is more than 1 button is this example. Like save, delete, cancel, confirm.

bootbox.dialog({
        title: "This is a form in a modal.",
        message: '<div class="row">  ' +
            '<div class="col-md-12"> ' +
            '<form class="form-horizontal"> ' +
            '<div class="form-group"> ' +
            '<label class="col-md-4 control-label" for="name">Name</label> ' +
            '<div class="col-md-4"> ' +
            '<input id="name" name="name" type="text" placeholder="Your name" class="form-control input-md"> ' +
            '<span class="help-block">Here goes your name</span> </div> ' +
            '</div> ' +
            '<div class="form-group"> ' +
            '<label class="col-md-4 control-label" for="awesomeness">How awesome is this?</label> ' +
            '<div class="col-md-4"> <div class="radio"> <label for="awesomeness-0"> ' +
            '<input type="radio" name="awesomeness" id="awesomeness-0" value="Really awesome" checked="checked"> ' +
            'Really awesome </label> ' +
            '</div><div class="radio"> <label for="awesomeness-1"> ' +
            '<input type="radio" name="awesomeness" id="awesomeness-1" value="Super awesome"> Super awesome </label> ' +
            '</div> ' +
            '</div> </div>' +
            '</form> </div>  </div>',
        buttons: {
            success: {
                label: "Save",
                className: "btn-success",
                callback: function () {
                    var name = $('#name').val();
                    var answer = $("input[name='awesomeness']:checked").val()
                    Example.show("Hello " + name + ". You've chosen <b>" + answer + "</b>");
                }
            }
        }
    }
);

我想知道如何增加按钮之间的间距，以使它们之间的距离更远并且看起来更宽敞，并且对话框的UI更加美观.我不太擅长这些东西.我搜了很多.请帮我.您的帮助将不胜感激.非常感谢.

I would like to know how to increase the spacing between the buttons so that they are placed more far apart and look spacious and the UI of the dialog box is more beautiful. I am not so good at these stuff. I have searched a lot. Please help me. Your help will be much appreciated. Thank you very much.

请尽可能提供一些代码和现场示例.再次谢谢你.

Please give some code and live example if possible. Thank you again.

推荐答案

您可以使用& nbsp; 或 margin 属性在网页上的按钮之间添加间距.

You can use   or margin property to add spacing between buttons on a webpage.

您可以使用& nbsp;在第一个按钮的关闭标签和第二个按钮的打开标签之间，如下所示.

You can use   between the closing tag of first button and opening tag of second button just like shown below.

<button>Button 1</button> &nbsp;&nbsp;&nbsp; <button>Button 2</button>

您可以添加更多的& nbsp; 来添加更多的空间.

you can add more   for adding more space.

您可以通过在其两侧添加 margin 来增加两个对象之间的间距.CSS代码如下，

You can add spacing between two objects by adding margin on its sides. The CSS code is as follows,

.btn_name{
    margin-left:10px;
}

要在左侧添加空间，也可以使用以下代码在右侧添加空间，

to add space on left side or you can add space on right side by using the following code,

.btn_name{
    margin-right:10px;
}

这篇关于想要在按钮之间添加间距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！