elementos input com tamanhos diferentes
Bom dia pessoal!
Tudo bem?
Sou iniciante em bootstrap, poderiam me ajudar com um problema?
Em uma página html criei uma lista onde em cada item tem um label e um input.
O problema é que o comprimento de cada input fica proporcional ao tamanho do label.
Saberiam me dizer uma forma de corrigir isso?
Preciso que o comprimento dos inputs sejam sempre uniformes entre eles.
Segue o trecho do html:
" <form class="needs-validation" novalidate>
<ul id="relacao" class="list-group mb-3">
<li id="li001" class="list-group-item d-flex justify-content-between lh-condensed">
<div class="mb-3">
<h6 class="my-0">010005 - PC</h6>
<small class="text-muted">PLACA NEUTRALIZADORA PARA MICT C/PEDRA UN MILC</small><br><br>
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-sm">Contagem:</span>
</div>
<input type="number" id="cnt0001" inputmode="numeric" class="form-control" min="0" required aria-label="Exemplo do tamanho do input" aria-describedby="inputGroup-sizing-sm">
<div class="invalid-feedback">
É obrigatório inserir uma quantidade, nem que seja zero.
</div>
</div>
</div>
</li>
<li id="li002" class="list-group-item d-flex justify-content-between lh-condensed">
<div class="mb-3">
<h6 class="my-0">010010 - UN</h6>
<small class="text-muted">REFIL PARA FORRO DE ASSENTO SANITARIO 40UN </small><br><br>
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-sm">Contagem:</span>
</div>
<input type="number" id="cnt0002" inputmode="numeric" width="48" class="form-control" min="0" required aria-label="Exemplo do tamanho do input" aria-describedby="inputGroup-sizing-sm">
<div class="invalid-feedback">
É obrigatório inserir uma quantidade, nem que seja zero.
</div>
</div>
</div>
</li>
<li id="li003" class="list-group-item d-flex justify-content-between lh-condensed">
<div class="mb-3">
<h6 class="my-0">010011 - CX</h6>
<small class="text-muted">RESERVATORIO P/ SABONETEIRA ABS - MILCLEAN</small><br><br>
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-sm">Contagem:</span>
</div>
<input type="number" id="cnt0003" inputmode="numeric" width="48" class="form-control" min="0" required aria-label="Exemplo do tamanho do input" aria-describedby="inputGroup-sizing-sm">
<div class="invalid-feedback">
É obrigatório inserir uma quantidade, nem que seja zero.
</div>
</div>
</div>
</li>
</ul>
<hr class="mb-4">
<button class="btn btn-primary btn-lg btn-block" type="submit">Enviar Inventário</button>
</form> "
Tudo bem?
Sou iniciante em bootstrap, poderiam me ajudar com um problema?
Em uma página html criei uma lista onde em cada item tem um label e um input.
O problema é que o comprimento de cada input fica proporcional ao tamanho do label.
Saberiam me dizer uma forma de corrigir isso?
Preciso que o comprimento dos inputs sejam sempre uniformes entre eles.
Segue o trecho do html:
" <form class="needs-validation" novalidate>
<ul id="relacao" class="list-group mb-3">
<li id="li001" class="list-group-item d-flex justify-content-between lh-condensed">
<div class="mb-3">
<h6 class="my-0">010005 - PC</h6>
<small class="text-muted">PLACA NEUTRALIZADORA PARA MICT C/PEDRA UN MILC</small><br><br>
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-sm">Contagem:</span>
</div>
<input type="number" id="cnt0001" inputmode="numeric" class="form-control" min="0" required aria-label="Exemplo do tamanho do input" aria-describedby="inputGroup-sizing-sm">
<div class="invalid-feedback">
É obrigatório inserir uma quantidade, nem que seja zero.
</div>
</div>
</div>
</li>
<li id="li002" class="list-group-item d-flex justify-content-between lh-condensed">
<div class="mb-3">
<h6 class="my-0">010010 - UN</h6>
<small class="text-muted">REFIL PARA FORRO DE ASSENTO SANITARIO 40UN </small><br><br>
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-sm">Contagem:</span>
</div>
<input type="number" id="cnt0002" inputmode="numeric" width="48" class="form-control" min="0" required aria-label="Exemplo do tamanho do input" aria-describedby="inputGroup-sizing-sm">
<div class="invalid-feedback">
É obrigatório inserir uma quantidade, nem que seja zero.
</div>
</div>
</div>
</li>
<li id="li003" class="list-group-item d-flex justify-content-between lh-condensed">
<div class="mb-3">
<h6 class="my-0">010011 - CX</h6>
<small class="text-muted">RESERVATORIO P/ SABONETEIRA ABS - MILCLEAN</small><br><br>
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-sm">Contagem:</span>
</div>
<input type="number" id="cnt0003" inputmode="numeric" width="48" class="form-control" min="0" required aria-label="Exemplo do tamanho do input" aria-describedby="inputGroup-sizing-sm">
<div class="invalid-feedback">
É obrigatório inserir uma quantidade, nem que seja zero.
</div>
</div>
</div>
</li>
</ul>
<hr class="mb-4">
<button class="btn btn-primary btn-lg btn-block" type="submit">Enviar Inventário</button>
</form> "
Denis Barros
Curtidas 0