Question

我有一个包含此代码的表单，其末尾有两个复选框。我想要的是checkboxex水平对齐：

<div class="form-horizontal">
    @Html.HiddenFor(x => x.CategoriaId)
    @Html.HiddenFor(x => x.NombreCategoria)
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <div class="form-group">
        @Html.LabelFor(model => model.NombreCategoria, "Tipo de Producto", htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            <label class="form-control-static" style="color:#ff6a00">@Model.NombreCategoria</label>
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(model => model.Titulo, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Titulo, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Titulo, "", new { @class = "text-danger" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(model => model.Descripcion, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.TextAreaFor(model => model.Descripcion, new { @class = "form-control", @rows = 3 })
            @Html.ValidationMessageFor(model => model.Descripcion, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Precio, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Precio, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Precio, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        <div class="">
            @Html.LabelFor(model => model.ContactoTelefono, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-2">
                @Html.CheckBoxFor(model => model.ContactoTelefono, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.ContactoTelefono, "", new { @class = "text-danger" })
            </div>


            @Html.LabelFor(model => model.ContactoMail, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-2">
                @Html.CheckBoxFor(model => model.ContactoMail, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.ContactoMail, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>
</div>

现在显示复选框，它们之间有很大的空间。我想把它们放在一起。

先谢谢你。

Answer 1

赞this sample?

<强> HTML：

<div class="form-group">
    <input type="checkbox" class="form-control checkbox-inline" />
    <input type="checkbox" class="form-control checkbox-inline" />
</div>

<强> CSS：

.checkbox-inline {
    display: inline-block;
    width: 30px;
    height: 30px;
}

在引导程序中水平放置两个复选框，一个在另一个旁边

1 个答案: