0

Não estou conseguindo alinhar minhas labels e reduzir os espaçamentos verticais entre as labels e os inputs. Alguns estão se ajustando e outros não. Gostaria de reduzir o espaçamento vertical/horizontal que distancia os campos para aproveitar melhor o espaço da tela. Alguém sabe como me ajudar?

css

input[type=text] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    /*border: 1px solid #555;*/
    outline: none;
}


input[type=text]:focus {
    background-color: lightblue;
    color:black;
}

html

<div class="form-horizontal">
<div class="form-group row">
    <div class="col-md-2">
        <label  class="control-label">Natureza</label>
        <select id="pessoaNatureza" data-modal=""  data-plugin="selectpicker" title="Selecione uma opção" class="form-control show-tick show-menu-arrow"></select>
        <span  class="text-danger"></span>
    </div>
    <div class="col-md-4">
        <label  control-label">Data de Inclusão</label>
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text">
                    <i class="icon wb-calendar" aria-hidden="true"></i>
                </span>
            </div>
            <input id="txtDataInclusao" class="form-control" data-multidate="true" data-plugin="datepicker" disabled />
        </div>
        <span class="text-danger"></span>
    </div>
</div>
<div class="form-group row">
    <div class="col-md-6">
        <label  control-label">Razão Social</label>
        <input  class="form-control text-uppercase" />
        <span  class="text-danger"></span>
    </div>
    <div class="col-md-6">
        <label  control-label">Nome Fantasia</label>
        <input class="form-control text-uppercase" />
        <span  class="text-danger"></span>
    </div>
</div>
<div class="form-group row">

    <div class="col-md-4">
        <label control-label">Abertura</label>
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text">
                    <i class="icon wb-calendar" aria-hidden="true"></i>
                </span>
            </div>
            <input id="txtDataAbertura" class="form-control" data-multidate="true" data-plugin="datepicker" />
        </div>
        <span class="text-danger"></span>
    </div>
    <div class="col-md-5">
        <label class="control-label">Regime Tributário</label>
        <select data-plugin="selectpicker" title="Selecione uma opção" class="form-control selectClass show-tick show-menu-arrow"></select>
        <span class="text-danger"></span>
    </div>

</div>

Atualmente minha tela está assim:

inserir a descrição da imagem aqui

E removendo os espaçamentos, gostaria de obter um resultado como este:

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

2
  • Executando seu snippet não fica como na imagem, pode editar e fazer com que replique o comportamento da imagem, senão fica difícil de ajudar Commented 31/07/2018 às 12:08
  • Assim como o Ricardo comentou, apenas utilize o snippet quando faz sentido usar. Você já havia sido orientado na pergunta que excluiu. O snippet são para exemplos completos (Exemplo Mínimo, Completo e Verificável), não para postar códigos aleatórios que não tem porque serem executados.
    – Woss
    Commented 31/07/2018 às 12:57

2 Respostas 2

0

Seu HTML estava com um probleminha, vc escreve o nome da classe fora do class=" " deveria ficar assim class="control-label"

Sobre o espaçamento entro os inputs vc vai precisar mexer no valor original do padding do Grid do Bootstrap responsável por isso. Eu criei uma classe .meuform div[class^="col-"] { } e fiz esse tratamento, mas não recomento mudar os espaçamentos originais do Grid...

Tem outros campos do seu forme que seria bom vc revisar. Aqui está a documentação oficial: https://getbootstrap.com/docs/3.3/css/#forms

Veja como ficou abaixo:

    input[type=text] {
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            box-sizing: border-box;
            /*border: 1px solid #555;*/
            outline: none;
        }
        
        
        input[type=text]:focus {
            background-color: lightblue;
            color:black;
        }
        .meuform div[class^="col-"] {
            padding: calc(15px / 2); /* calcula a distancia entro um inpute e outro e os cantos da tela*/
        }
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

    
    <div class="container-fluid">
        <div class="form-horizontal meuform">
            <div class="form-group row">
                <div class="col-md-2">
                    <label asp-for="PessoaNatureza" class="control-label">Natureza</label>
                    <select id="pessoaNatureza" data-modal="" asp-for="PessoaNatureza" asp-items="Model.PessoasNaturezas" data-plugin="selectpicker" title="Selecione uma opção" class="form-control show-tick show-menu-arrow"></select>
                    <span asp-validation-for="PessoaNatureza" class="text-danger"></span>
                </div>
                <div class="col-md-4">
                    <label asp-for="PessoaFisicaViewModel.DataNascimento" class="control-label">Data de Inclusão</label>
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text">
                                <i class="icon wb-calendar" aria-hidden="true"></i>
                            </span>
                        </div>
                        <input id="txtDataInclusao" asp-for="PessoaFisicaViewModel.DataNascimento"  class="form-control" data-multidate="true" data-plugin="datepicker" disabled />
                    </div>
                    <span asp-validation-for="PessoaFisicaViewModel.DataNascimento" class="text-danger"></span>
                </div>
            </div>
             <div class="form-group row">
                <div class="col-md-6">
                    <label asp-for="PessoaJuridicaViewModel.RazaoSocial" class="control-label">Razão Social</label>
                    <input asp-for="PessoaJuridicaViewModel.RazaoSocial" class="form-control text-uppercase" />
                    <span asp-validation-for="PessoaJuridicaViewModel.RazaoSocial" class="text-danger"></span>
                </div>
                <div class="col-md-6">
                    <label asp-for="PessoaJuridicaViewModel.NomeFantasia" class="control-label">Nome Fantasia</label>
                    <input asp-for="PessoaJuridicaViewModel.NomeFantasia" class="form-control text-uppercase" />
                    <span asp-validation-for="PessoaJuridicaViewModel.NomeFantasia" class="text-danger"></span>
                </div>
            </div>
            <div class="form-group row">
        
                <div class="col-md-4">
                    <label asp-for="PessoaJuridicaViewModel.DataAbertura" class="control-label">Abertura</label>
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text">
                                <i class="icon wb-calendar" aria-hidden="true"></i>
                            </span>
                        </div>
                        <input id="txtDataAbertura" asp-for="PessoaJuridicaViewModel.DataAbertura" class="form-control" data-multidate="true" data-plugin="datepicker" />
                    </div>
                    <span asp-validation-for="PessoaJuridicaViewModel.DataAbertura" class="text-danger"></span>
                </div>
                <div class="col-md-5">
                    <label asp-for="PessoaJuridicaViewModel.RegimeTributario" class="control-label">Regime Tributário</label>
                    <select asp-for="PessoaJuridicaViewModel.RegimeTributario" asp-items="Model.PessoaJuridicaViewModel.RegimesTributarios" data-plugin="selectpicker" title="Selecione uma opção" class="form-control selectClass show-tick show-menu-arrow"></select>
                    <span asp-validation-for="PessoaJuridicaViewModel.RegimeTributario" class="text-danger"></span>
                </div>
        
            </div>
        </div>
    </div>

6
  • Realmente @hugocsl, eu vacilei ao definir class="control-label" de forma errada. É o tal do copiar e colar... rssrs Funcionou 95%... Para os campos input que são texto, continua o espaçamento vertical entre a label e o input... Exite uma maneira de eu corrigir isso, mesmo que seja alterando o html? (imagem atualizada no post acima)
    – Master JR
    Commented 31/07/2018 às 20:45
  • @JalberRomano se vc puder atualiza também o código da pergunta de como está no momento, pois aqui não estou conseguindo simular o erro como o código atual da pergunta. Mas provavelmente no input ou na label tem um padding/margin bottom, inspeciona os dois elementos e verifica
    – hugocsl
    Commented 31/07/2018 às 21:44
  • dei uma limpada no html e atualizei o post com o css e html da page. Parece que campos que não são select ficam com espaçamentos verticais consideráveis...
    – Master JR
    Commented 31/07/2018 às 22:51
  • Descobri o problema @hugocsl: No css, a propriedade margin: 8px 0; estava atrapalhando os inputs... Obrigado pela ajuda :) Abraço!
    – Master JR
    Commented 1/08/2018 às 0:41
  • @JalberRomano Cara só cheguei em casa agora nem deu para testar com o código do edit que vc fez, mas só poderia ser alguma margin ou padding mesmo, que bom que resolveu! tmj
    – hugocsl
    Commented 1/08/2018 às 0:54
-1

Se tiver usando o bootstrap, basta trocar o label por span. Depois coloca um style="margin-top:0px". Pelo menos pra mim funcionou.

0

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 .