materialize CSSライブラリから水平カードを実装する際に問題が発生しました

Question

Materialize CSSライブラリを使用してウェブサイトを作成していますが、次のコードを使用してHorizo​​ntalカードを追加できませんでした。下記のリンク： http://materializecss.com/cards.html

<div class="col s12 m7"> 
<h2 class="header">Horizontal Card</h2> 
<div class="card horizontal"> 
    <div class="card-image"> 
    <img src="http://lorempixel.com/100/190/nature/6"> 
    </div> 
    <div class="card-stacked"> 
    <div class="card-content"> 
     <p>I am a very simple card. I am good at containing small bits of information.</p> 
    </div> 
    <div class="card-action"> 
     <a href="#">This is a link</a> 
    </div> 
    </div> 
</div> 

カードがまだ垂直カードとして表示されます。 問題の原因となる考え方はありますか？必要に応じて詳細情報を提供します。

Answer 1

アレンフン以下のコードを参考にしてください。

CSS: 
    .card.horizontal { 
     display: -webkit-flex; 
     display: -ms-flexbox; 
     display: flex; 
    } 

HTML: 
    <div class="row"> 
      <div class="col s12 m4"> 
       <h2 class="header">Horizontal Card</h2> 
       <div class="card horizontal"> 
        <div class="card-image"> 
         <img src="http://lorempixel.com/100/190/nature/6"> 
        </div> 
        <div class="card-stacked"> 
         <div class="card-content"> 
          <p>I am a very simple card. I am good at containing small bits of information.</p> 
         </div> 
         <div class="card-action"> 
          <a href="#">This is a link</a> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div>