將兩個複選框水平放置，一個放在另一個旁邊，放在引導程序中

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