1

soy nuevo en materialize, pero me parece un framework genial, me arrepiento de no haber hecho uso de el en otros proyectos, porque realmente facilita el diseno, pero mi problema es el siguiente, quiero crear 2 row unidas, es decir, el sistema de grillas de materialize.

Me refiero a esta linea:

<div class="row"></div>

Si a esa linea le asigno una imagen y un color de fondo, y posteriomente creo otra "row", me salen separadas por aproximadamente 10px o mas, quiero que esten juntas.

Aquí les dejo mi código de ejemplo:

<div class="container">


   <div class="row"> 
     <div class="col s12 m12 l10 blue darken-2 center offset-l1 m0 s0"> <!-- Color azul y centrado-->
      <img class="responsive-img" src="img/logo.png"> <!-- Imagen responsiva-->
     </div> 
   </div>



   <div class="row"> 
     <div class="col s12 m12 l10 white center offset-l1 m0 s0"> <!-- Color  y centrado-->
      <!-- Contenido-->
      <br>
      <div class="row">
          <div class="col s12 m10 l8 offset-l2 m1 s0 z-depth-5 blue-text">
           <p>Mi texto 1</p>
       <p>Mi texto 2 </p>
          </div> 
      <!-- Fin Contenido-->
     </div> 
   </div>
  </div> 
 </div> 

Me gustaría que la parte de arriba azul y con mi logo este pegada a la parte de abajo.

Aquí les dejo como sale actualmente (podrán observar la separación entre la parte azul y la blanca) My page

1 respuesta 1

1

Podrías hacerlo de la siguiente manera:

Usando simplemente columnas en vez de filas:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css">

  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/js/materialize.min.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>  <title>JS Bin</title>
</head>
<body>
  <div class="container">

   <div class="row"> 
     <div class="col s12 m12 l10 blue darken-2 center "> <!-- Color azul y centrado-->
       <h1>Titulo</h1>
     </div> 
     
     <div class="col s12 m12 l10 red blue-text">
       <p>Mi texto 1</p>
       <p>Mi texto 2 </p>
     </div> 
    </div> 
  </div> 
</body>
</html>

O podrías usar dos filas pero quitandole el margen de abajo:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css">

  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/js/materialize.min.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>  <title>Ejemplo</title>
</head>
<body>
  <div class="container">

   <div class="row" style="margin-bottom: 0px;"> 
     <div class="col s12 m12 l10 blue darken-2 center"> <!-- Color azul y centrado-->
       <h1>Titulo</h1>
     </div> 
   </div>
    
   <div class="row" style="margin-bottom: 0px;">
     <div class="col s12 m12 l10 red blue-text">
       <p>Mi texto 1</p>
       <p>Mi texto 2 </p>
     </div> 
   </div> 
  </div> 
</body>
</html>

Tu Respuesta

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

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