Correctly align form to your left margin

Navigation
2

I am using bootstrap 3. In a modal window I have an online form and below is a table. But the left margin of the form is not the same as that of the table or the title of the window. How can I correct that? 

<section class="main container">
    <div class="modal fade" id="ventana">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-tittle">Consulta Cliente</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <form action="accion.php" class="form-inline">
                            <div class="form-group">
                                <div>
                                    <label for="Stud">Nombre Cliente:</label>
                                    <input class="form-control" id="cliente" type="text" placeholder="Cliente a buscar">
                                </div>
                            </div>

                            <div class="form-group">
                                <div>
                                    <button class="btn btn-primary">Aceptar</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <h3>Cuentas Corrientes</h3>
                            <table class="table table-condensed table-bordered table-hover">
                                <tr class="success">
                                    <th>Fecha</th>
                                    <th>Período</th>
                                    <th>Glosa</th>
                                    <th>Doc.</th>
                                    <th>Cant.</th>
                                    <th>Importe</th>
                                    <th>Saldo</th>
                                    <th> </th>
                                </tr>
                                <tr>
                                    <td>12/05/2016</td>
                                    <td>201610</td>
                                    <td>Cobranza Diciembre 2017</td>
                                    <td>Rep.Sup.Enero 2017</td>
                                    <td>65</td>
                                    <td>280.00</td>
                                    <td>280.00</td>
                                    <td>+</td>
                                </tr>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                </div>
            </div>
        </div>
    </div>
</section>

    
asked by Piropeator 24.08.2017 в 20:20
source

3 answers

2

Your form is inside an element <div> with class .row , but this element needs another element <div> with the distribution of columns you want to put. 

<div class="row">
    <form action="accion.php" class="form-inline">
        <!-- Cuerpo del formulario -->
    </form>                    
</div>

To have the same margin, it is enough that the <div> element nested inside the element <div> with the class .row , you add a class of columned. In this case, I add the same kind of column that the table has, .col-md-12 . 

<div class="row">
    <div class="col-md-12">
        <!-- Formulario -->  
        <form action="accion.php" class="form-inline">
            <!-- Cuerpo del formulario -->
        </form>   
    </div>                 
</div>
<div class="row">
    <div class="col-md-12">
        <!-- Tabla -->
        <table class="table table-condensed table-bordered table-hover">
            <!-- Cuerpo de la tabla -->
        </table>
    </div>
</div>

Here you can see it in action. To the code I added a button to activate the modal: 

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<section class="main container">
  <!-- Modal --> 
  <div class="modal fade" id="ventana">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">Consulta Cliente</h4>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-4">
              <form action="accion.php" class="form-inline">
                <div class="form-group">
                  <div>
                    <label for="Stud">Nombre Cliente:</label>
                    <input class="form-control" id="cliente" type="text" placeholder="Cliente a buscar">
                  </div>
                </div>

                <div class="form-group">
                  <div>
                    <button class="btn btn-primary">Aceptar</button>
                  </div>
                </div>
              </form>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <h3>Cuentas Corrientes</h3>
              <table class="table table-condensed table-bordered table-hover">
                <tr class="success">
                  <th>Fecha</th>
                  <th>Período</th>
                  <th>Glosa</th>
                  <th>Doc.</th>
                  <th>Cant.</th>
                  <th>Importe</th>
                  <th>Saldo</th>
                  <th> </th>
                </tr>
                <tr>
                  <td>12/05/2016</td>
                  <td>201610</td>
                  <td>Cobranza Diciembre 2017</td>
                  <td>Rep.Sup.Enero 2017</td>
                  <td>65</td>
                  <td>280.00</td>
                  <td>280.00</td>
                  <td>+</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
        <div class="modal-footer">
        </div>
      </div>
    </div>
  </div>
  
  <!-- Botón para activar el modal -->
  <div>
    <button data-toggle="modal" data-target="#ventana">
      Activar
    </button>
  </div>
</section>
    
answered by 24.08.2017 / 20:55
source
4

You have to put the form within a div with the class col-md-12 in this way: 

<div class="col-md-12">
    <form action="accion.php" class="form-inline">
        <div class="form-group">
            <div>
                <label for="Stud">Nombre Cliente:</label>
                <input class="form-control" id="cliente" type="text" placeholder="Cliente a buscar">
            </div>
        </div>
        <div class="form-group">
            <div>
                <button class="btn btn-primary">Aceptar</button>
            </div>
        </div>
    </form>
</div>
    
answered by 24.08.2017 в 20:35
1

Other options are to add the "col-xs-12" directly to the form: Example 

<form action="accion.php" class="col-xs-12 form-inline">...

    
answered by 24.08.2017 в 21:17
Conditional error in foreach using ASP.Net MVC How to avoid an error