0

estoy haciendo un maquetado boostrap para ir metiendome en el hilo , en la primeraa fila quiero tener puesto : a la izquierda el nombr ede la pagina, y a la derecha el menu con sus botones y tal.

El problema que me ha surgido es que ell menu que se supone que esta a la izquierda no llega hasta el final de la fila ( cuando veais el codigo en el explorador vereis que queda un espacio a la derecha sin relllenarse con el menu)

        <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Maquetado v.1</title>
    
    
    	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    	<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    </head>
    
    <body>
    	
    	<div class="container">
    		<div class="row  bg-warning">
    			<!-- tiitutlo -->
    			<div class="col-md-4 col-sm-8 col-xs-4">
                	<h1 class="text-primary text-center " >Menu</h1>
            	</div>
            	<div class="col-md-8 col-sm-4 col-xs-4 ">
            		<!-- menu -->
    				
    				<nav class="navbar navbar-expand-lg navbar-light bg-light">
    	  <a class="navbar-brand" href="#">Menu</a>
    	  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    	    <span class="navbar-toggler-icon"></span>
    	  </button>
    
    	  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    	    <ul class="navbar-nav mr-auto">
    	      <li class="nav-item active">
    	        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
    	      </li>
    	      <li class="nav-item">
    	        <a class="nav-link" href="#">Link</a>
    	      </li>
    	      <li class="nav-item dropdown">
    	        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    	          Dropdown
    	        </a>
    	        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
    	          <a class="dropdown-item" href="#">Action</a>
    	          <a class="dropdown-item" href="#">Another action</a>
    	          <div class="dropdown-divider"></div>
    	          <a class="dropdown-item" href="#">Something else here</a>
    	        </div>
    	      </li>
    	      <li class="nav-item">
    	        <a class="nav-link disabled" href="#">Disabled</a>
    	      </li>
    	    </ul>
    	    <form class="form-inline my-2 my-lg-0">
    	      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    	      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    	    </form>
    	  </div>
    	</nav>
    <!-- fin menu -->
            	</div>
    		</div>
    		<div class="row ">
    			
    		</div>
    
    		<div class="row">
    			<div class="col-3 bg-info">
    				<p>a</p>
    			</div>
    			<div class="col-6 bg-success">
    				<p>b</p>
    			</div>
    			<div class="col-3 bg-primary">
    				<p>c</p>
    			</div>
    		</div>
    
    	</div>
    
    </body>
    </html>

He estado mirando por la web y no he encontrado lo que queria. Otra duda que me surge es hasta que punto debo meter CSS a la medida que no pueda arreglar mis problemas con el mismo bootstrap. Finalemente muchas graciasde antemano

PD: Quiero ir documentando mis problemas con el maquetado sobre este. Los experimentado en StackOverflow me aconsejais ir añadiendo a esta pregunta nuevos problemas ? o cerrar esta y crear una nueva por cada nuevo problema encontrado aunque sea del mismo maquetado ? Gracias de nuevo comunidad

introducir la descripción de la imagen aquí

1
  • El espacio que mencionas es por el padding que se aplica a las col-*, y las preguntas se deben hacer con un problema concreto, si surge otro diferente puedes realizar una nueva pregunta
    – user22721
    Commented el 30 abr. 2018 a las 14:06

2 respuestas 2

2

He estado ojeando el código y la parte naranja que se te sale a la derecha no forma parte del menú naranja de la izquierda. Ten cuidado con los div. Al parecer tienes otro y dentro el . Si quieres que el se ajuste 100% de width como indicas, debes usar la clase .container-fuild. Te dejo el código por si te sirve, si es así como lo deseabas.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Maquetado v.1</title>


      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    </head>

    <body>

      <div class="container">
        <div class="row  bg-warning">
          <!-- tiitutlo -->
          <div class="col-md-4 col-sm-8 col-xs-4">
            <h1 class="text-primary text-center " >Menu</h1>
          </div>
          
          <!-- menu -->

          <nav class="navbar navbar-expand-lg navbar-light bg-light container-fluid">
            <a class="navbar-brand" href="#">Menu</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                  <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Dropdown
                  </a>
                  <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Something else here</a>
                  </div>
                </li>
                <li class="nav-item">
                  <a class="nav-link disabled" href="#">Disabled</a>
                </li>
              </ul>
              <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
              </form>
            </div>
          </nav>
          <!-- fin menu -->
          
        </div>
        <div class="row ">

        </div>

        <div class="row">
          <div class="col-3 bg-info">
            <p>a</p>
          </div>
          <div class="col-6 bg-success">
            <p>b</p>
          </div>
          <div class="col-3 bg-primary">
            <p>c</p>
          </div>
        </div>

      </div>

    </body>
    </html>

Y mi respuesta a tu pregunta final es, usa libremente CSS siempre y cuando requieras dar un toque más personal a la web o a algún elemento en particular. No debes restringir el uso a solo bootstrap. Yo en mi caso, uso el bootstrap para hacer la plantilla y que ésta quede lo más responsive posible, y luego aplico estilos diferentes con distintos css.

Saludos!

1

Básicamente como buen Framework, Bootstrap nos facilita la vida teniendo trabajo ya realizado para varias cosillas, principalmente (su mayor utilidad a mi parecer) para responsive web design. En este caso tenemos 12 column grid, cada una de igual ancho (width). Entonces, debes decidir (en tu prototipo), cuánto asignar a cada una de las 3 columnas (a, b y c) y para "evitar" que te quede "aire" en algún lado, puedes por ejemplo en el caso del menú que por lo que veo es estático (no es generado por un CMS o script), calcular aproximadamente cuántas column grid necesitarías para quedar lo más ajustado posible de acuerdo al tamaño de la fuente, tipo, etc... Luego de eso, seguramente (lo más probable) es que te quede igualmente espacio hacia tu derecha (en este caso), lo cual puedes solucionar o bien centrando el menu dentro de la columna (b) y/o manejando el padding entre ítems de menú de tal forma que "cuadre" con las column grid que le asignaste.

Otro detalle, "xs" se utiliza para definir screen "extra small", o sea básicamente móviles (celulares) por lo que se tiende a utilizas 12 de column grid.

PD: Dejaría el "search" en una columna aparte del menú. La división podría ser algo como a = 2, b = 6 y c = 4 (en col-md y obviamente el col-lg).

En cuanto a cada problema, cada pregunta si es que es un problema diferente al especificado en la pregunta actual. Son hilos diferentes pero si es de lo mismo (sin salirse del hilo) puedes ir añandiéndolas aquí mismo.

Espero haberte ayudado.

Saludos Cordiales!

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.