none
Como alinhar inputs e reduzir o espaçamento entre labels usando css RRS feed

  • Pergunta

  • 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 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" 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" 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" 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" 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>

    Atualmente minha tela está assim:

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

    terça-feira, 31 de julho de 2018 00:56