Align left and decrease distance between controls with bootstrap

Navigation
3

See the following image:

Noticethatthefirstlabel(CNPJ)isalongwayfromthemarginandmostimportanttome.ThedistancebetweenthelabelandthecontrolistoolargeandthedistancebetweentheOSlabelandtheinputcontroloftheCNPJislargeaswell.HowdoIsolvethisquestion:Mycodebelow.

<linkrel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" />
    <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" />

    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

    <link href="~/Content/Menu.css" rel="stylesheet" />
    <link href="~/Content/Styles.css" rel="stylesheet" />

    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <script type="text/javascript" src="~/Scripts/bootstrap.js"></script>
    <link href="~/Content/datepicker.css" rel="stylesheet" media="screen" />
    <script src="~/Scripts/bootstrap-datepicker.js"></script>

................
 <form class="form-horizontal" role="form">
                <div class="form-group">
                    <label for="txtCnpj1" class="col-sm-2 control-label">CNPJ:</label>
                    <div class="col-sm-2">
                        <input type="text" class="form-control" id="txtCnpj1" placeholder="Digite o Cnpj">
                    </div>
                    <label for="txtOS" class="col-sm-2 control-label">OS:</label>
                    <div class="col-sm-2">
                        <input type="text" class="form-control input-small" id="txtOS" placeholder="Digite o numero da OS">
                    </div>
                    <input id="btnPesquisar" type="button" class="btn btn-success" value="Pesquisar" onclick=" return MontaAgendamento();" />
                </div>
            </form>
............
    
asked by anonymous 07.07.2014 / 14:44

1 answer

1

The col-xs, col-sm, col-md, col-lg classes are used to specify what size the column should take at each resolution.

Explaining:

.col-xs- (column size): Specifies the size of the column in cell phones

.col-sm- (column size): Specifies the size of the column in tablets

.col-md- (column size): Specifies the column size for desktops

.col-lg- (column size): Specifies the size of the column on monitors larger than normal desktops.

Now for the classes to function correctly you need to enclose your code in two other divs that serve to define the total size of the grid.

In your case the code would look like this: 

<div class="container">
  <div class="row">
   <div class="col-md-12">
     <form class="form-horizontal" role="form">
       <div class="form-group col-md-4">
         <label for="txtCnpj1" class="col-md-2 control-label">CNPJ:</label>
         <div class="col-md-10">
           <input type="text" class="form-control" id="txtCnpj1" placeholder="Digite o Cnpj">
        </div>
     </div>
    <div class="form-group col-md-4">
      <label for="txtOS" class="col-md-2 control-label">OS:</label>
      <div class="col-md-10">
         <input type="text" class="form-control input-small" id="txtOS" placeholder="Digite o numero da OS">
       </div>
       </div>
       <input id="btnPesquisar" type="button" class="btn btn-success" value="Pesquisar" onclick=" return MontaAgendamento();" />
     </form>
    </div>
  </div>
</div>

This code will align the block of CNPJ and OS as you want, for the other fields just follow as is in the code above. And for more information on how the bootstrap grid system works, visit link

    
07.07.2014 / 20:06
Error deleting FK About menus on websites