Bootstrap alignment is not correct

Navigation
0

I tried to do a bootstrap alignment, so that I had the label and beside it the control. Well, thinking that way, I chose the class. Well, when I render the site, the alignment gets the label on top and the control down. By the code is not sure the result. I made numerous attempts and did not get anything. I'm reading about the bootstrap, but I still have not got the expected result. 

<div id="agendamento">
     <form class="form-horizontal" role="form">
         <div class="control-group">
             <label for="txtCnpjOs" class="control-label">CNPJ:</label>
             <div class="controls col-sm-03">
              <input type="text" class="span2" id="txtCnpjOs" placeholder="Digite o Cnpj">
            </div>
        </div>
         <div class="control-group">
             <label for="txtOS" class="control-label">OS:</label>
             <div class="controls">
              <input type="text" class="input-small col-sm-03" id="txtOS" placeholder="Digite o numero da OS">
            </div><br />
            <input id="btnPesquisar" type="button" class="btn btn-success" value="Pesquisar" onclick=" return MontaAgendamento();" />
         </div>

     </form> 
     <br />

     <div id="filtro">
         <div id="FiltroPesquisa">
            <form class="form-horizontal" role="form">
                <div class="control-group">
                    <label for="txtAcao" id="lblProxAcao" class="control-label">Ação</label>
                    <div class="controls">
                        <input id="txtAcao" type="text" readonly="true" value="" />
                        <input id="txtProxAcao" type="text" readonly="true" value="" />
                    </div>
                </div>
                <div class="control-group">
                    <label for="txtDataCadastro" class="control-label">Data Cadastro</label>
                    <div class="controls">
                        <input id="txtDataCadastro" type="text" readonly="true" value="" />
                    </div>
                    <label for="txtIDV99" class="control-label">ID V99:</label>
                    <div class="controls">
                        <input id="txtIDV99" type="text" readonly="true" value=""/>
                    </div>
                </div>
            </form>
        </div> 
     </div>
 </div> @*Fecho a div agendamento*@
    
asked by anonymous 04.07.2014 / 20:12

2 answers

1

Are you using Bootstrap 2.3.2 or 3.2.0?

I wonder why if you are using 2.3.2 in the documentation there is no role="form" and no .col-sm-3 grid classes .

If you are using 3.2.0 the classes to be used in the forms have changed, here is an example of the two for you to compare:

v2.3.2 

<div class="control-group">
  <label class="control-label" for="inputEmail">Email</label>
  <div class="controls">
    <input type="text" id="inputEmail" placeholder="Email">
  </div>
</div>

v3.2.0 

<div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
  <div class="col-sm-10">
    <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
  </div>
</div>

You will replace the .control-group with .form-control and add the .form-control / p>

It verifies well which of the two versions of the bootstrap is using and for more clarification below the documentation of the two versions.

v3.2.0 link

v2.3.2 link

    
04.07.2014 / 21:15
1

I added a col-sm-2 to the label and it was sufficient to align the left of the field. The getbootstrap-forms documentation has this information.

    
04.07.2014 / 21:09
Query that selects the last line of each device? Modal popup does not work