Поместите два флажка горизонтально, один рядом с другим, в bootstrap

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