2

Quero diminuir o tamanho do campo mas nao estou conseguindo, alguma ajuda? segue um print

inserir a descrição da imagem aqui

      <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">


      <div class="container">

        <div class="row">        
         <label class="col-md-3 col-xs-12"><b>IEM9 Preço Médio</b></label>                       
        </div>

<div class="row">        
         <label class="col-md-3 col-xs-12"><b>Acesso menor ou igual a 512 kBps</b></label>                       
        </div>

<div class="row">
  <div class="col-xs-6 col-md-4">Pessoa Física</div>
  <div class="col-xs-6 col-md-4">Pessoa Jurídica</div>
</div>

<div class="row">   
  <div class="col-xs-6 col-md-4">
    <label class="col-md-3">UF</label>
<select name="IEM9_F_uf" id="IEM9_F_uf" class="form-control">
<option value>Estados</option>
<option value="<?php echo $estado; ?>" selected ><?php echo $estado; ?></option>
<option value="AC">Acre</option>
<option value="AL">Alagoas</option>
<option value="AM">Amazonas</option>
<option value="AP">Amapá</option>
<option value="BA">Bahia</option>
<option value="CE">Ceará</option>
<option value="DF">Distrito Federal</option>
<option value="ES">Espírito Santo</option>
<option value="GO">Goiás</option>
<option value="MA">Maranhão</option>
<option value="MT">Mato Grosso</option>
<option value="MS">Mato Grosso do Sul</option>
<option value="MG">Minas Gerais</option>
<option value="PA">Pará</option>
<option value="PB">Paraíba</option>
<option value="PR">Paraná</option>
<option value="PE">Pernambuco</option>
<option value="PI">Piauí</option>
<option value="RJ">Rio de Janeiro</option>
<option value="RN">Rio Grande do Norte</option>
<option value="RO">Rondônia</option>
<option value="RS">Rio Grande do Sul</option>
<option value="RR">Roraima</option>
<option value="SC">Santa Catarina</option>
<option value="SE">Sergipe</option>
<option value="SP">São Paulo</option>
<option value="TO">Tocantins</option>
</select>

  </div>
  <div class="col-xs-6 col-md-4">

<label class="col-md-3">UF</label>
<select name="IEM9_J_uf" id="IEM9_J_uf" class="form-control ">
<option value>Estados</option>
<option value="<?php echo $estado; ?>" selected ><?php echo $estado; ?> </option>
<option value="AC">Acre</option>
<option value="AL">Alagoas</option>
<option value="AM">Amazonas</option>
<option value="AP">Amapá</option>
<option value="BA">Bahia</option>
<option value="CE">Ceará</option>
<option value="DF">Distrito Federal</option>
<option value="ES">Espírito Santo</option>
<option value="GO">Goiás</option>
<option value="MA">Maranhão</option>
<option value="MT">Mato Grosso</option>
<option value="MS">Mato Grosso do Sul</option>
<option value="MG">Minas Gerais</option>
<option value="PA">Pará</option>
<option value="PB">Paraíba</option>
<option value="PR">Paraná</option>
<option value="PE">Pernambuco</option>
<option value="PI">Piauí</option>
<option value="RJ" >Rio de Janeiro</option>
<option value="RN">Rio Grande do Norte</option>
<option value="RO">Rondônia</option>
<option value="RS">Rio Grande do Sul</option>
<option value="RR">Roraima</option>
<option value="SC">Santa Catarina</option>
<option value="SE">Sergipe</option>
<option value="SP">São Paulo</option>
<option value="TO">Tocantins</option>
</select>

  </div>
</div>


<div class="row">
  <div class="col-xs-6 col-md-4">   
<label class="col-md-3">Valor</label>
<input type="text" size="21" maxlength="21"  value="<?php if($valor_iem9_f_a !=NULL){echo formato_numerico($valor_iem9_f_a);} else {echo "0,00";}?>" class="form-control decimal" name="IEM9_F_a" id="IEM9_F_a" title="Preço médio para conexões com velocidade de acesso menor ou igual a 512 kBps">
  </div>

  <div class="col-xs-6 col-md-4">
<label class="col-md-3">Valor</label>
<input type="text" size="21" maxlength="21"  value="<?php if($valor_iem9_j_a !=NULL){echo formato_numerico($valor_iem9_j_a);} else {echo "0,00";}?>" class="form-control decimal" name="IEM9_J_a" id="IEM9_J_a" title="Preço médio para conexões com velocidade de acesso menor ou igual a 512 kBps">

  </div>
</div>
6
  • 1
    Detalhe melhor a sua pergunta, não consegui entender nada, não há print, não há organização e muito menos lógica Commented 7/12/2017 às 16:41
  • Por favor edite a pergunta para melhor compreensão, não da pra entender nada.
    – arllondias
    Commented 7/12/2017 às 16:41
  • se voce estiver utilizando os links do bootstrap corretamente, basta diminuir o class das suas divs para col-xs-4 e col-md-2 e invés de guardar dentro de uma div class row, coloque dentro de uma div class container
    – Victor
    Commented 7/12/2017 às 17:03
  • fiz as alterações e nada mudou.
    – olifreitas
    Commented 7/12/2017 às 17:17
  • Cara tu não manja nada de Front? O teu html e as classes bootstrap de grid estão erradas.
    – LeAndrade
    Commented 7/12/2017 às 17:26

3 Respostas 3

2

Você pode diminuir o tamanho das cols, lembrando que o grid do bootstrap possui número máximo de 12 colunas, trocando por um valor de coluna menor ao atual. Caso precise usar um tamanho específico, você pode criar uma classe css e inserir o valor manual, utilizando !important para sobrescrever a classe do bootstrap.

1

Veja o fiddle

Perceba as classes que estão acompanhando a classe form-group. Elas vão definir o tamanho do conteúdo dentro dele, inclusive dos inputs.

Nada te impede de utilizar essas classes dentro dos inputs mesmo, mas sua padronização fica melhor se fizer no elemento pai.

Veja o conceito de grid do bootstrap. Mas basicamente, cada "row" é quebrada em 12 colunas, e você pode definir a quantidade de colunas utilizada para cada intervalo de dispositivo (xs, sm, md, lg). No fiddle, deixei aleatório o tamanho para md, e todos com 12 colunas no xs.

1
  • Obrigado, mas eu pretendo deixar alinhado arrumando a imagem que postei.
    – olifreitas
    Commented 7/12/2017 às 17:35
0

Só para complementar as respostas citadas pelos outros colegas, nós podemos também alterar o tamanho dos input e select alterando suas classes form-control (classe nativa do Bootstrap). Veja os exemplos abaixo:

<!-- Tamanho dos inputs -->

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">

<!-- Tamanho dos selects -->

<select class="form-control form-control-lg">
  <option>Large select</option>
</select>
<select class="form-control">
  <option>Default select</option>
</select>
<select class="form-control form-control-sm">
  <option>Small select</option>
</select>

  • Onde lg e sm determinam o tamanho dos botões.

A resposta foi baseada na documentação do bootstrap: Link

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 .