0

Estoy en un proyecto y el cual debe de ajustarse correctamente a cualquier pantalla, en mi pc, va bien, pero lo ejecuto en mi móvil y no va. He intentado utilizar Responsive Design con Bootstrap y sus respectivos row col-xl-12 pero nada tengo todos los plugins instalados.

Aquí mi código HTML:

<div id="navbar" class="NavBar">
<ul class="nav nav-pills pull-left">
  <a id="name" class="navbar-brand" href="#"><strong><br>Esteban Vera V.</br></strong></a>
</ul>
<ul class="nav nav-pills pull-right">
  <li class="active"><a href="#"><strong>About Me.</strong></a></li>
  <li><a href="#"><strong>Portfolio.</strong></a></li>
  <li><a href="#"><strong>Contact Me.</strong></a></li>
</ul>




2
  • 1
    Hola Estaban, deberías poner el código completo de la página. Así es difícil saber donde tienes el problema. Commented el 18 abr. 2017 a las 9:00
  • Necesitamos el código de la página completo. Es posible que te falte una clase de tipo container.
    – Muriano
    Commented el 18 abr. 2017 a las 9:25

2 respuestas 2

2

Bootstrap se basa en una grid de 12 columnas y para hacer que los elementos de tu página web ( div ) se adapten a cualquier pantalla y resolución debes dotarlos de las clases correspondientes: col-Tamaño-Col donde tamaño puede ser: xs, sm, md, lg, xl.... y col números del 1-12.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <title>Bootstrap Example</title>

<body>

<div class="container">
      <!-- Example row of columns -->
      <h1>My First Bootstrap Page</h1>
      <div class="row">
        <div class="col-sm-6 col-xs-6 col-md-4">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div>
        <div class="col-md-4">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
       </div>
        <div class="col-md-4 col-xs-6 col-sm-6 col-lg-6">
          <h2>Heading</h2>
          <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div>
        <div class="col-md-4 col-lg-6">
          <h2>Heading</h2>
          <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div>
      </div>

      <hr>

      <footer>
        <p>&copy; 2016 Company, Inc.</p>
      </footer>
    </div> <!-- /container -->


</body>
</html>

He intentado utilizar Responsive Design con Bootstrap y sus respectivos "row" "col-xl-12" pero nada

En el código que pones en tu pregunta no se ve el uso de dichas clases CSS

Mirate la documentación de bootstrap, así como algunos ejemplos o incluso, parte de una plantilla. Y después, si no consigues colocar los div en tu página como quieres, plantea tu código y el problema más concreto :)

0
0

Esteban,

Deberías poner todo el código para poder ver dónde falla. Aún así, con el código que has puesto, debería funcionarte bien si la clase navbar fuese:

navbar 
{ width:100%;}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.