2

Estou treinando na criação de forms, e estou fazendo uso de bootstrap nele, principalmente das <div class="row"> e <div class="col-md-4">. Porém, quando fui colocar apenas dois elementos na mesma linha, respectivamente e` o campo de input do primeiro item não acompanhou o tamanho da coluna, deixando assim um espaço em branco entre os dois campos. Como faço pra que ele aumente? tentei aplicar css somente no id do campo e não resultou em alteração.

Abaixo o código que estou usando na row:

<div class="row">

<div class="col-md-8">
    <div class="form-group">
        <label>Nome Completo</label><br>
        <input id="fullname" type="text">
    </div>
</div>

<div class="col-md-4">
    <div class="form-group">
        <label>Idade</label><br>
        <input id="age" type="number">
    </div>
</div>
</div>

E links adicionados externamente:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>

<link href='custom.css' rel='stylesheet' type='text/css'>
2
  • Natã, talvez você possa aumentar o 'padding' ou a 'margin' da sua div. De qualquer forma seria melhor você expor um exemplo mais sólido do seu código para que as respostas sejam melhores. Commented 6/08/2018 às 15:56
  • Otávio, adicionei a parte de código que estou usando na row, acha que seria o bastante ou coloco o form por completo? Commented 6/08/2018 às 15:59

2 Respostas 2

3

Você não precisa adicionar um estilo customizado, como o @hugo indicou, basta adicionar a classe form-control e o próprio Bootstrap vai aplicar.

<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

<div class="row">

        <div class="col-md-8">
            <div class="form-group">
                <label>Nome Completo</label><br>
                <input id="fullname" class="form-control" type="text">
            </div>
        </div>

        <div class="col-md-4">
            <div class="form-group">
                <label>Idade</label><br>
                <input id="age" class="form-control" type="number">
            </div>
        </div>
</div>

2
  • Só lembrando que o form-control vem com diversas outras classes que talvez não seja interessantes para o form que eles está construindo, principalmente se for um form customizado dentro do BS... Acho que talvez o melhor seja usar a classe w-100 nesse caso como coloquei no edite.
    – hugocsl
    Commented 6/08/2018 às 16:28
  • Mas levando em conta que o AP especificou que está treinando forms com BS, acho que é mais provável que .form-control seja a resposta mais sensata neste caso. Commented 12/09/2018 às 14:28
2

Vc pode simplesmente colocar 100% de largura nos inputs, assim eles ocupam o tamanho inteiro da coluna. (eu coloquei o css direto para todos os inputs, vc vc pode criar uma classe mais específica para isso, aqui foi só um exemplo)

Ou usar a classe w-100 que é uma classe original do Bootstrap 4 e deixa o elemento com width: 100% (usei essa classe no segundo input como exemplo)

Exiba em "Página toda" para ver como fica a resposividade

    input:first-of-type {
        width: 100%;
    }
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

<div class="row">

        <div class="col-md-8">
            <div class="form-group">
                <label>Nome Completo</label><br>
                <input id="fullname" type="text">
            </div>
        </div>

        <div class="col-md-4">
            <div class="form-group">
                <label>Idade</label><br>
                <input id="age" class="w-100" type="number">
            </div>
        </div>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .