Can someone please help with a problem I have with two checkboxes side by side. For some reason they don't line up with the rest of the controls and I have to specify a height or else the div has a height of zero. All the other controls align perfectly. I have attached a screen shot and my code.
<div class="row align-items-start">
<div class="col-2">
<label asp-for="customer.MeasureLoft" class="col-form-label">M (Loft)</label>
</div>
<div class="col-2">
<label asp-for="customer.MeasureIWI" class="col-form-label">M (IWI)</label>
</div>
<div class="col-2">
<label asp-for="customer.MeasureUFI" class="col-form-label">M (UFI)</label>
</div>
<div class="col-2">
<label asp-for="customer.MeasureRIR" class=" col-form-label">M (RIR)</label>
</div>
<div class="col-4">
<label asp-for="customer.MeasureESH_FTCH" class="col-form-label">M (ESH/FTCH)</label>
</div>
</div>
<div class="row align-items-start">
<div class="col-2">
<input asp-for="customer.MeasureLoft" class="form-control" style="width:100px;" />
</div>
<div class="col-2">
<input asp-for="customer.MeasureIWI" class="form-control" style="width:100px;" />
</div>
<div class="col-2">
<input asp-for="customer.MeasureUFI" class="form-control" style="width:100px;" />
</div>
<div class="col-2">
<input asp-for="customer.MeasureRIR" class="form-control" style="width:100px;" />
</div>
<div class="col-4">
<input asp-for="customer.MeasureESH_FTCH" class="form-control" style="width:100px;" />
</div>
</div>
<div class="row align-items-start">
<div class="col-6">
<label asp-for="customer.Flex" class="col-form-label">Flex</label>
</div>
<div class="col-6">
<label asp-for="customer.HCRO" class="col-form-label">HCRO</label>
</div>
</div>
<div class="row align-items-start" style="height: 38px;">
<div class="col-6">
<input asp-for="customer.Flex" class="form-check-input" type="checkbox" />
</div>
<div class="col-6">
<input asp-for="customer.HCRO" class="form-check-input" type="checkbox" />
</div>
</div>
Aucun commentaire:
Enregistrer un commentaire