ブートストラップグリッドを使用している列が正しく表示されない

Question

ブートストラップを使用してページに列が正しく表示されない。それは正しく設定されているようですが、私が意図しているように横並びではなく縦に表示しています。関連コード：

<div class="container"> 
     <div class="row"> 
      <div class="col md 6"> 
       <h1 style="text-decoration: underline">A Message</h1> 
       <h2>Some more information</h2> 
       <img id="imageX" src="imageX.png" height="150" width="100"><h2>Signature</h2> 
      </div> 
       <h2>Video Pre-Caption<h2> 
      <div class="col md 3"> 
       <div> 
        <iframe width="250" height="150" src="https://www.youtube.com/embed/E__F5a2pQco" frameborder="1" allowfullscreen></iframe> 
       </div> 
      </div> 
      <div class="col md 3"> 
       <div> 
        <iframe width="250" height="150" src="https://www.youtube.com/embed/Ra-Cq19vBXA" frameborder="1" allowfullscreen></iframe> 
       </div> 
      </div> 
     </div> 
    </div> 

Answer 1

あなたは、グリッドのブートストラップクラスに名前を付けるの間で-（ハイフン）の文字が欠落しています。完全に働いた

<div class="container"> 
    <div class="row"> 
     <div class="col-md-6"> <!-- Notice col*-*md*-*6 .* is for clarity--> 
      <h1 style="text-decoration: underline">A Message</h1> 
      <h2>Some more information</h2> 
      <img id="imageX" src="imageX.png" height="150" width="100"><h2>Signature</h2> 
     </div> 
      <h2>Video Pre-Caption<h2> 
     <div class="col-md-3"> 
      <div> 
       <iframe width="250" height="150" src="https://www.youtube.com/embed/E__F5a2pQco" frameborder="1" allowfullscreen></iframe> 
      </div> 
     </div> 
     <div class="col-md-3"> 
      <div> 
       <iframe width="250" height="150" src="https://www.youtube.com/embed/Ra-Cq19vBXA" frameborder="1" allowfullscreen></iframe> 
      </div> 
     </div> 
    </div> 
</div>