tabla en medio de un contenedor bootstrap

  • Autor Autor UriRM
  • Fecha de inicio Fecha de inicio
U

UriRM

Curioso
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Buenas amigos.

Hace poco empece a utilizar bootstrap logrando programar muy rapido algunos formularios. Estoy con un problema de diseño en cuanto a una tabla que quiero dejarla en el medio de la fila de 12 columnas de mi ventana modal, y no logro como poder hacerlo. Este es el codigo que tengo:
HTML:
<html lang="es">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap -->
    <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="../bootstrap/css/style_nav.css" rel="stylesheet">
</head>
    <body>
       <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#basicExample">Launch demo modal</button>
        <div class="modal fade" id="basicExample" tabindex="-1" role="form" aria-labelledby="exampleModalLabel" aria-hidden="false">
            <div class="modal-dialog form" role="document">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Modal Title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                   <div class="form-group input-sm">
                       <label class="col-sm-3 control-label input-sm">Rut :</label>
                       <div class="col-sm-9">
                           <input type="text" name="rut_operador" class="form-control input-sm" placeholder="Rut">
                       </div>
                   </div>
                   <div class="form-group input-sm">
                       <label class="col-sm-3 control-label input-sm">Nombre :</label>
                       <div class="col-sm-9">
                           <input type="text" name="nommbre_operador" class="form-control input-sm" placeholder="Nombre">
                       </div>
                   </div>
                   <div class="form-group input-sm">
                       <label class="col-sm-3 control-label input-sm">Apellido :</label>
                       <div class="col-sm-9">
                           <input type="text" name="apellido_operador" class="form-control input-sm" placeholder="Apellido">
                       </div>
                   </div>
                   <div class="form-group input-sm">
                       <label class="col-sm-3 control-label input-sm">Telefono :</label>
                       <div class="col-sm-9">
                           <input type="text" name="telefono_operador" class="form-control input-sm" placeholder="Telefono">
                       </div>
                   </div>
                   <div class="form-group input-sm">
                       <label class="col-sm-3 control-label input-sm">Nombre de Uusuario :</label>
                       <div class="col-sm-9">
                           <input type="text" name="nombre_usuario" class="form-control input-sm" placeholder="Usuario">
                       </div>
                   </div>
                   <div class="form-group input-sm">
                       <label class="col-sm-3 control-label input-sm">Clave :</label>
                       <div class="col-sm-9">
                           <input type="text" name="clave_usuario1" class="form-control input-sm" placeholder="Clave">
                       </div>
                   </div>
                   <div class="form-group input-sm">
                       <label class="col-sm-3 control-label input-sm">Reescribir Clave :</label>
                       <div class="col-sm-9">
                           <input type="text" name="clave_usuario2" class="form-control input-sm" placeholder="Reescribir Clave">
                       </div>
                   </div>
                   <div class="row-sm-9">
                   <table class="table table-bordered table-condensed">
                       <tr>
                           <th><span class="glyphicon glyphicon-plus"></span></th>
                           <th><span class="glyphicon glyphicon-pencil"></span></th>
                           <th><span class="glyphicon glyphicon-remove"></span></th>
                           <th><span class="glyphicon glyphicon-eye-open"></span></th>
                       </tr>
                       <tr>
                           <td><input type="checkbox"></td>
                           <td><input type="checkbox"></td>
                           <td><input type="checkbox"></td>
                           <td><input type="checkbox"></td>
                       </tr>
                   </table>
                    </div>
                  
                </div>
                <div class="modal-footer">
                    <input type="button" value="Guardar">
                </div>
            </div>
        </div>
    </body>
    <script src="../jquery/3.2.1/jquery.min.js"></script>
    <script src="../bootstrap/js/bootstrap.min.js"></script>
</html>

La tabla que esta al ultimo, no puedo hacer que sea mas pequeña cada una de las celdas y que este al medio de esa fila.
No busco que me resuelvan este problema, si alguien fuera tan amable de explicarme como puedo hacerlo y lograr entender las grillas, puff me aliviarian un grande.

Saludos Amigos y muchas gracias por sus ayudas.

PD: Este codigo solo lo tengo asi para poder diseñar mis ventanas y asi probar como se ven cuando las estoy diseñando.
 
Que version de bootstrap estas usando?
 
Que version de bootstrap estas usando?

Buenas Amigo. De acuerdo a su consulta la version utilizada es la siguiente:

CSS:
/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under the MIT license
 */

Espero te sirva. Saludos
 
Buenas Amigo. De acuerdo a su consulta la version utilizada es la siguiente:

CSS:
/*!
* Bootstrap v3.3.7 (http://getbootstrap.com)
* Copyright 2011-2016 Twitter, Inc.
* Licensed under the MIT license
*/

Espero te sirva. Saludos

Prueba esto man a ver si te funcion!

HTML:
<div class="row">
    <div class="col-sm-4 col-sm-offset-4">
        <table class="table table-bordered table-condensed">
            <tr>
                <th><span class="glyphicon glyphicon-plus"></span></th>
                <th><span class="glyphicon glyphicon-pencil"></span></th>
                <th><span class="glyphicon glyphicon-remove"></span></th>
                <th><span class="glyphicon glyphicon-eye-open"></span></th>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td><input type="checkbox"></td>
                <td><input type="checkbox"></td>
                <td><input type="checkbox"></td>
            </tr>
        </table>
    </div>
</div>
 
Genial Amigo !!! Nose como lo lograste, pero resulto y quedo genial.
Pero...
Me ayudas a entender lo que hiciste ? o como interpretar la solucion propuesta ?
Saludos.
 
Genial Amigo !!! Nose como lo lograste, pero resulto y quedo genial.
Pero...
Me ayudas a entender lo que hiciste ? o como interpretar la solucion propuesta ?
Saludos.

Si man, bueno cree una fila con la clase row y con col-sm-4 una columna 4 de las 12 y con col-sm-offset-4
se crea un margen de 4 columnas así en contenido queda centrado en las 4 columnas col-sm-4!

No se si me explique bien XD
.
 
Atrás
Arriba