elementos input com tamanhos diferentes
28/03/2022
0
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
Curtir tópico
+ 0
Responder
Clique aqui para fazer login e interagir na Comunidade :)