两个引导程序控件之间的间距不起作用

Question

试图做到这一点：

我写了这个：

            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-8">
                    @Html.Label("Name", new {@class = ".control-label"})
                    @Html.DropDownList("nameadmin", new SelectList(Enumerable.Range(77881, 5)), new {@class = "dropdown"})

                    @Html.CheckBox("ShowEmailInFooter", new {@class = "checkbox-inline  col-sm-offset-4"})
                    @Html.Label("Show Email in Footer", new {@class = ".control-label"})
                </div>
            </div>

但它看起来像这样：

看到它没有间距。我该怎么办？

Answer 1

你可能想要更像这样的东西来获得你想要的风格。我对生成的HTML看起来并不正面，但我相信这会让你走上正轨。

<div class="row>
    <div class="col-sm-offset-2 col-sm-6">    
        <div class="form-group">
            @Html.Label("Name", new {@class = ".control-label"})
            @Html.DropDownList("nameadmin", new SelectList(Enumerable.Range(77881, 5)), new {@class = "dropdown"})
        </div>
    </div>
    <div class="col-sm-4">    
        <div class="form-group">
           @Html.CheckBox("ShowEmailInFooter", new {@class = "checkbox-inline"})
           @Html.Label("Show Email in Footer", new {@class = ".control-label"})
        </div>
    </div>
</div>

Bootstrap还具有内联表单的样式。 http://getbootstrap.com/css/#forms-inline

<form class="form-inline">
    <div class="form-group">
        @Html.Label("Name", new {@class = ".control-label"})
        @Html.DropDownList("nameadmin", new SelectList(Enumerable.Range(77881, 5)), new {@class = "dropdown"})
    </div>
    <div class="checkbox">
        @Html.CheckBox("ShowEmailInFooter", new {@class = "checkbox-inline"})
        @Html.Label("Show Email in Footer", new {@class = ".control-label"})
    </div>
</form>