Align cards from Framework Materialize

Navigation
1

Now I just decided to take a look at Materialize and try to use the card element. I just can not understand why they do not get organized horizontally! 

    <div class="container">
      <div class="section">


        <div class="row">
         <div class="col s12 m4">
           <div class="card">
             <div class="card-image">
               <img src="images/sample-1.jpg">
               <span class="card-title">Card Title</span>
             </div>
             <div class="card-content">
               <p>I am a very simple card. I am good at containing small bits of information.
               I am convenient because I require little markup to use effectively.</p>
             </div>
             <div class="card-action">
               <a href="#">This is a link</a>
             </div>
           </div>
         </div>
       </div>

       <div class="row">
        <div class="col s12 m4">
          <div class="card">
            <div class="card-image">
              <img src="images/sample-1.jpg">
              <span class="card-title">Card Title</span>
            </div>
            <div class="card-content">
              <p>I am a very simple card. I am good at containing small bits of information.
              I am convenient because I require little markup to use effectively.</p>
            </div>
            <div class="card-action">
              <a href="#">This is a link</a>
            </div>
          </div>
        </div>
      </div>

      <div class="row">
       <div class="col s12 m4">
         <div class="card">
           <div class="card-image">
             <img src="images/sample-1.jpg">
             <span class="card-title">Card Title</span>
           </div>
           <div class="card-content">
             <p>I am a very simple card. I am good at containing small bits of information.
             I am convenient because I require little markup to use effectively.</p>
           </div>
           <div class="card-action">
             <a href="#">This is a link</a>
           </div>
         </div>
       </div>
     </div>


   </div>
  </div>

I took a print:

    
asked by anonymous 08.04.2016 / 20:52

2 answers

1

The problem is that you have separated the card's into rows so that it works, you just have to add all of them inside the same class row and use the class col to put one side by side.

Always remember the grid system:

The row is row and col to columns.

Follow the jsfiddle .

    
08.04.2016 / 20:59
0

They are not aligned because you are separating them by a row.

Look at my example: leaving the 3 within a single row they get perfectly aligned

Codepen: link

    
08.04.2016 / 21:02
Write log of system exceptions using application events How to find a term in a mysql database?