问题描述:

Trying to make this:

And I wrote this:

 <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>

But It made it look like this:

See it doesn't have the spacing. How can I fix ?

网友答案:

You will probably want something more like this to get the style you want. I've not positive on what the generated html looks like, but I believe this will get you on the right track.

<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 also has styles for inline forms. 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>
相关阅读:
Top