Duda con bootstrap 3

[xavidenia]

hola aver si alguien me puede aclarar esta duda que tengo.....

estoy creando una pagina web  responsive con bootstrap 3  ya la tengo armada y como de normal la he creado  con la rejilla col-lg  para pantallas grandes .......
pues la pantalla de mi pc es de 22 pulgadas y una resolucion de 1360 x 768px....

con lo cual la media query que entra en trabajo con esta pantalla es la de min-width 1200px
pues bien ahora que la tengo montada empiezo a adaptarla para otros dispositivos.....
y adapto de la siguiente forma.......

media query min-width 768px ---> col-sm
esta la adapto para smartphones en horizontal y tablets en vertical
nota: adaptando el col-sm para estos dispositivos se me queda la pagina configurada para smartphones y tablets en vertical y horizontal.
tambien se me queda configurada para smartphones pequeños, se podria ajustar mas, pero me vale como se ve, si decidiera ajustarla mas, bastaria con ajustar con el col-xs.....

media query  min-width 992px ---> col-md
en teoria esta seria para tablets en horizontal y dispositivos medianos ,pantallas de 10 o 15 pulgadas.

el problema viene en que al adaptarla a una resolucion inferior si le  ajusto el col-sm , consigo que se vea bien en las pantallas de smartphones y tablets , pero  se desajusta el col-lg que es para pantallas grandes...
alguien puede decirme si es que estoy haciendo algo mal???

alguien me puede decir si es que tengo que poner los ajustes de la css dentro de cada media query???
por ejemplo : si quiero que el footer tenga un formato, en smartphones y otro en desktops , tengo que poner el ajuste css de cada uno dentro de su respectivo media query???
otra cosa que me he dado cuenta es que la pagina deja algo de scroll horizontal tanto si la veo en smartphone como si la veo en tablet ,tanto en vertical como en horizontal es poco seran unos 20 px pero me gustaria quitarselo.

Gracias y saludos

[Marciano_79]

La idea es que Bootstrap se adapte a las ideas de uno y no al revés.... mira tu puedes automatizar el código a tu gusto, descargar tu archivo de Bootstrap como lo necesites, verifica en la pagina oficial en ingresa donde dice customize es mejor preparar el css ahí y sacas lo que necesitas a tu medida.. incluso quitando esos 20 px demás que no te gustan... saludos!

[Jeferi]

Con Bootstrap lo que haces es estructurar el sitio web dependiendo del ancho de la pantalla del dispositivo. Además incluye plugins (opcionales) y componentes listos para ser utilizados.
Normalmente yo siempre escribo reglas CSS propias. Bootstrap lo he utilizado únicamente para darle una estructura inicial.

Recuerda además incluir las columnas dentro de una capa tipo container:

Código [Seleccionar] Expandir

<div class="container">
    <div class="row">
        <aside id="barra-lateral" class=" col-lg-4 col-md-5 col-xs-12">Hola mundo, yo soy una columna lateral</aside>
        <section id="contenido-principal" class="col-lg-8 col-md-7 col-xs-12">Hola mundo, yo soy el contenido</section>
    </div>
</div>

Recuerda que yo siempre le doy reglas CSS propias para aplicarle padding u otras reglas CSS.

Espero haberme explicado correctamente.

Aún así, incluye códigos de ejemplo de tus archivos HTML para saber mejor qué estás intentando.

[xavidenia]

gracias por vuestras respuestas ......

os entiendo mi duda es que creo la media query  del dispositivo  le meto un min-width de 960px por ejemplo una medida para tablet  y me crea un scroll horizonal con lo cual debo de  bajar el width  en el media query de dicho dispositivo........
por otro lado bootstrap viene con muchos margenes predefinidos como los que llevan
col-xs-push
col-xs-pull
col-xs-offset
y lo mismo con las mismas clases de las variantes sm, md y lg.......

debo adaptar  dichos margenes al diseño que yo estoy creando o bootstrap deberia por si mismo escalarlo automaticamente, simplemente cambiando  por ejemplo : col-xs-11 por col-sm-10,col-md-9,col-lg-8 ???
tambien tengo otro problema  y es que cree el header  con menu responsive  para que cuando reduzca de resolucion me salga el boton collapse  para desplegar el menu de la pagina.....

lo hice, lo probe , funcionaba luego lo pase , lo hice en php y lo guarde como header. inc.php de forma que solo tengo un mismo menu para todas las paginas, simplemente insertando en cada pagina un ....

Código [Seleccionar] Expandir


<?php
include_once('includes/header.inc.php');
?>


lo probe en xampp, funcionaba y funciona.....

el problema es que subi la pagina a un server gratuito para probarla(hostinger)  y el boton que despliega el menu del header no  funciona no despliega el menu, lo he revisado todo y no le veo ningun problema...... pero no me abre....

en cambio ese mismo menu lo descargo desde hostinger y lo pruebo en el xampp en server local y si que va.....
si que se abre y despliega

se os ocurre por donde pueda venir el error???

muchas gracias

[Jeferi]

¿Puedes subir el código a Github?

le meto un min-width de 960px por ejemplo una medida para tablet

¿Le metes un max-width también? Sube el código.

debo adaptar  dichos margenes al diseño que yo estoy creando o bootstrap deberia por si mismo escalarlo automaticamente, simplemente cambiando  por ejemplo : col-xs-11 por col-sm-10,col-md-9,col-lg-8 ???

Un elemento puede tener varias clases ^col

Código (html4strict) [Seleccionar] Expandir

<div class="col-xs-12 col-sm-10 col-md-7 col-lg-5"></div>

Si no subes código va a ser difícil saber por qué no te funciona qué cosa.

[xavidenia]

gracias por tu respuesta.......

ya se que un elemento puede tener varias clases col.....

cada clase col da un width difrente y hay 12 col  de cada clase.....
te los describo aqui......
12 col-xs (cada unos con un width difererente)
12 col-sm (cada unos con un width difererente)
12 col-md (cada unos con un width difererente)
12 col-lg (cada unos con un width difererente)
pero estas clases solo dan tamaño al contenedor con el width, no posicionan....

y lo mismo pasa con las clases
col-xs-push a  col-lg-push (esta da un left que viene preestablecido)
col-xs-pull a  col-lg-pull (esta da un right  que viene preestablecido)
col-xs-offset a  col-lg-offset (esta clase da un margin-left  que viene preestablecido)
y todas con valores a %
estas clases si que pueden posicionar.....
mezclando por ejemplo, col-lg-5 col-lg-push-2....

se que puedo meter varias clases  de todas las que detallo arriba en un elemento
mi duda es col-xs-push-2  
viene con el valor preestablecido a left:16.66666667%
pq  si el col-xs-push-1 se me queda corto y el col-xs-push-3 demasiado largo...
lo logico es poner un col-xs-push-2 que esta entre los dos valores, pero si aun asi
el elemento no acaba de quedarse donde yo quiero, tendre que modificar ese valor, no???
eso es lo que preguntaba si habia que modificar esos valores????
o si habia que ir jugando  con los valores preestablecidos.......

en cuanto a los media query bootstrap ya los lleva preestablecidos tambien.....
de normal yo me he creado mi media query para smartphones de 5 o 5,5 pulgadas tanto en vertical como en horizontal.......

Código [Seleccionar] Expandir


@media (max-device-width:640px) and (orientation:landscape){
aqui css horizontal
}
@media (max-device-width:360px) and (orientation:portrait){
aqui css vertical
}

pero tanto en una como en la otra he tenido que bajar dentro de ellas el tamaño del container, pues si no lo hacia me creaba un escroll horizontal abajo.....

Código [Seleccionar] Expandir


@media (max-device-width:640px) and (orientation:landscape){
    .container{
width:538px;
    }
}
@media (max-device-width:360px) and (orientation:portrait){
    .container{
width:293px;
    }
}


entonces, no se si es normal que me cree un scroll horizontal abajo ,si le pongo el width de container correctamente, osea la width real del dispositivo......
si conoces alguna otra forma de hacer los media query que funcione mejor estoy abierto a sugerencias......

en cuanto a lo del boton del header te subo el codigo , seguramente  lo veras bien , pues he revisado el codigo 1000 veces y no veo el error, pero puede  que tenga un error y no haya dado con el........

Código [Seleccionar] Expandir


$ruta ="/pruebasphp/Pagina final/";
echo'<div class="container navbar navbar-default navbar-static-top" role="navigation">';
    echo'<div class="navbar-header">';
       echo'<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">';
            echo'<span class="sr-only">Menu</span>';
            echo'<span class="icon-bar"></span>';
               echo'<span class="icon-bar"></span>';
               echo'<span class="icon-bar"></span>';
           echo'</button>';
        echo'<a class="navbar-brand" href="index.php">';
               echo'<span class="logotipo"><img class="img-responsive" src="img/logotipo.png" alt="logotipo"</span>';
               echo'</a>';
       echo'</div>';
      echo'<div class="collapse navbar-collapse">';
        echo'<ul class="nav navbar-nav navbar-right">';
switch($_SERVER['PHP_SELF'])
{
case $ruta."index.php";
echo '<li class="text-center "><a href="servicios.php">Servicios</a></li>';
    echo '<li class="text-center"><a href="blog.php">Blog</a></li>';
    echo '<li class="text-center"><a href="proyectos.php">Proyectos</a></li>';
    echo '<li class="text-center"><a href="contacto.php">Contacto</a></li>';
break;
case $ruta."blog.php";
echo '<li class="text-center"><a href="index.php">Identidad</a></li>';
    echo '<li class="text-center"><a href="servicios.php">Servicios</a></li>';
    echo '<li class="text-center"><a href="proyectos.php">Proyectos</a></li>';
    echo '<li class="text-center"><a href="contacto.php">Contacto</a></li>';
break;
case $ruta."proyectos.php";
echo '<li class="text-center"><a href="index.php">Identidad</a></li>';
    echo '<li class="text-center"><a href="servicios.php">Servicios</a></li>';
    echo '<li class="text-center"><a href="blog.php">Blog</a></li>';
    echo '<li class="text-center"><a href="contacto.php">Contacto</a></li>';
break;
case $ruta."contacto.php";
echo '<li class="text-center"><a href="index.php">Identidad</a></li>';
    echo '<li class="text-center"><a href="servicios.php">Servicios</a></li>';
    echo '<li class="text-center"><a href="blog.php">Blog</a></li>';
    echo '<li class="text-center"><a href="proyectos.php">Proyectos</a></li>';
break;
case $ruta."servicios.php";
echo '<li class="text-center"><a href="index.php">Identidad</a></li>';
    echo '<li class="text-center"><a href="blog.php">Blog</a></li>';
    echo '<li class="text-center"><a href="proyectos.php">Proyectos</a></li>';
    echo '<li class="text-center"><a href="contacto.php">Contacto</a></li>';
break;
case $ruta."formulario_contacto.php";
break;
}
        echo'</ul>';
      echo'</div><!--/.nav-collapse -->';
echo'</div><!--/container -->';


gracias por tu respuesta y saludos

[Jeferi]

pq  si el col-xs-push-1 se me queda corto y el col-xs-push-3 demasiado largo...
lo logico es poner un col-xs-push-2 que esta entre los dos valores, pero si aun asi
el elemento no acaba de quedarse donde yo quiero, tendre que modificar ese valor, no???
eso es lo que preguntaba si habia que modificar esos valores????
o si habia que ir jugando  con los valores preestablecidos.......

Ahora he entendido tu pregunta.
Sí. Puedes modificar esos valores con tus propias reglas CSS.

Ten en cuenta algo:

Código (css) [Seleccionar] Expandir

@media (max-device-width:640px) and (orientation:landscape){
     .container{
width:538px;
     }
}

Si el container tiene un width de 538px en pantallas inferiores a 640px, y la pantalla tiene 400px, vas a ver un scroll horizontal porque el ancho del container es mayor que el ancho de la pantalla.
¿Por qué añades también orientation: landscape?

[xavidenia]

 aver no entiendo con mis propias reglas css 3 o vale copiar  ese valor a mi css y variarle el valor????

si tengo en cuenta eso de las pantallas inferiores por eso tengo dos media query mas para pantallas inferiores ........ adaptado a pantallas inferiores es mas curro y quiza este mas mal hecho pero funciona.....
pongo lo de landscape mas que nada para diferenciar la configuracion horizontal de la vertical(portrait), pq desde luego ambas tienen containers diferentes.......
podria poner un comentario , pero he preferido hacerlo asi.... aunque dudo que queden pantallas inferiores a 5 o 5,5 pulgadas en todo caso inferiores....
en teoria esta media query tambien deberia funcionar en pantallas inferiores, de echo lo hace  y si me crea algo de scroll horizontal pero solo en horizontal en vertical no.... tendre que ajusta algo mas.. donde no debe funcionar es es mayores de 640px......

aunque creo que no me has entendido......

Código [Seleccionar] Expandir


   @media (max-device-width:640px) and (orientation:landscape){
        .container{
    width:538px; <--- si aqui le pongo como valor 640px ya me crea scroll abajo horizontal
                              a 538px  lo tengo en el limite.... si le subo 1px osea, si el valor fuese 539px
                              ya me empieza a crear scroll horizontal abajo......

        }
   }

en cuanto a lo del header php no se si abras visto algun error , pero yo lo he revisado y lo veo bien

te recuerdo que funciona bien con el xampp  cuando no funciona es cuando lo subo a server de hostinger...

por cierto sabes de algun javascript con el que hacer un tipo lightbox , pero que en vez de fotos
salga texto..... formularios y cosas asi????

saludos nuevamente  y gracias por tu rapida respuesta