Ocupar toda la ventana con bootstrap

lautarosilva9500 · #1 (**permalink**) 15/05/2013, 11:28

Hola, este es mi primer mensaje en el foro, disculpen si no es la seccion correcta, busque y me parecio la mejor seccion.

Estoy incursionando en el framework bootstrap pero me encontré con un problema, si bien los estilos y demas funcionan bien, cuando declaro un div span12 o bien dos divs, uno de 3 y otro de 9 dentro de un div row, estos solo ocupan hasta 940px.
Usando la herramienta de inspeccionar elemento de chrome eo que el "row" efectivamente ocupa todo el ancho de la ventana, pero no asi los spans. Podría ser un problema de mi resolución de monitor? que es de 1366x768 o le estoy errando en algo mas?

pongo parte del código, si necesitan algo mas lo subo sin problema.

Código HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>SGT2</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="Sudo Soft" content="">
        <link href="./../css/bootstrap.min.css" rel="stylesheet" media="screen">
        <link href="./../css/bootstrap.css" rel="stylesheet">
        <link href="./../css/propio.css" rel="stylesheet" media="screen">
        <link rel="stylesheet" type="text/css" href="./../css/menu.css" />
        <link rel="shortcut icon" href="./../img/favicon.ico" type="image/x-icon"/> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
        <script type="text/javascript" src="./../js/modernizr.custom.29473.js"></script>        
        <script type="text/javascript" src="./../js/validacion.js"></script>
        <script src="http://code.jquery.com/jquery.js"></script>
        <script src="./../js/bootstrap.min.js"></script>
    </head>
    <body>

        <div class="row">
            <div class="span12">
                <img src="/img/cabeceragrande.gif" class="img-rounded">
            </div>
        </div>        
        <div class="row">
            <div class="span12">
                <div class="row">
                    <div class="span3">
                        <?php include_once './../fragmentos/_menu.php'; ?>
                    </div>
                    <div class="span9">
                        <form class="form-horizontal" name="formi" action="./especialidad.php" method="GET">
                        <fieldset>
                        <legend>Agregar una nueva Especialidad.</legend>
                        <div class="control-group">
                             <div class="controls">
                                  <input class="span3" type="text" id="input01" name="esp_nue" placeholder="Ingrese la nueva especialidad">
                             </div>
                       </div>
                       <div class="form-actions">
                            <input type="hidden" name="code" value="a"/>
                            <button type="submit" onclick="return veriFormuEspecialidad()" class="btn btn-success">Guardar</button>
                       </div>
                       </fieldset>
                       </form>
                    </div> 
                </div>
            </div>
        </div>

    </body>
</html>

adjunto una imagen para que ven a que me refiero

Aclaro que también intente usar "row-fluid" pero al cambiar el tamaño de la ventana se superponen los elementos o se desfasan y queda feo.
Desde ya muchas gracias.

pzin · #2 (**permalink**) 16/05/2013, 04:13

Bienvenido al foro.

Estaría bien dejar una URL para verlo online, ya que yo por ejemplo no acostumbro a usar Bootstrap y no estoy familiarizado con el framework.

danielugalde · #3 (**permalink**) 20/05/2013, 13:01

Mira, para lograr eso necesitas estar familiarizado a bootstrap en especial con el Scaffolding, tambien depende si lo que vas a hacer sera responsive,
esto es un ejemplo de como lo puedes hacer Full.

Código HTML:

Ver original<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

Saludos