ブートストラップグリッド3の列のレイアウトが機能しません

私はどこでも見て、すべてを試したと思います。 3つの列を持つウェブサイトのフッターを作成したい - それぞれにh4ヘッダーとイメージ（pngアイコン）があります。私は3つの列を取得する代わりに、私はお互いの下に積み重ねられた1つの列を得た。 HTMLコード：ブートストラップグリッド3の列のレイアウトが機能しません

<div class="footer"> 
 
     <div class="container"> 
 
     <div class="row"> 
 
      <div class="col-sm-4"> 
 
      <h4>Instagram</h4> 
 
      <a href="#" target="_blank"/><img src="img/instagram.png"/></a> 
 
      </div> 
 
      <div class="col-sm-4"> 
 
      <h4>Facebook</h4> 
 
      <a href="#" target="_blank"/><img src="img/facebook.png"/></a> 
 
      </div> 
 
      <div class="col-sm-4"> 
 
      <h4>LinkedIn</h4> 
 
      <a href="#" target="_blank"/><img src="img/linkedin.png"/></a> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div>

任意の理由は？前もって感謝します。

出典

2017-06-26 Mariusz S.

あなたのコードは何も問題はありません。すべて（css＆js）がエラーなしでロードされていることを確認しましたか？ –

col-md-4を使用していますか？ –

try col-md or col-lg –

：それらを試してみてください。

文書のセクションに次のものが含まれていることを確認してください。

<head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    </head>

CodePen例：https://codepen.io/CapySloth/pen/gRGNxa

出典

2017-06-26 17:42:35

<a href="#" target="_blank"/>のすべてのエンティティを<a href="#" target="_blank">に置き換えて、満足しています！

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<div class="footer"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-sm-4"> 
 
     <h4>Instagram</h4> 
 
     <a href="#" target="_blank"><img src="img/instagram.png"/></a> 
 
     </div> 
 
     <div class="col-sm-4"> 
 
     <h4>Facebook</h4> 
 
     <a href="#" target="_blank"><img src="img/facebook.png"/></a> 
 
     </div> 
 
     <div class="col-sm-4"> 
 
     <h4>LinkedIn</h4> 
 
     <a href="#" target="_blank"><img src="img/linkedin.png"/></a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

出典

2017-06-26 17:38:19 Alexander

第一：

<a href="#" target="_blank"/><img src="img/instagram.png"/></a>

があるべき/ REFとそれを閉じることが必要とされていないのimgの場合

<a href="#" target="_blank"><img src="img/instagram.png"></a>

：Do I need a "/" at the end of an <img> or <br> tag, etc.?

第二：あなたは彼らが常に一列に3項目になりたい場合はcol-xs-4を使用しています。（他の何も定義されていなければ、すべての画面サイズはxsになります）

第3の：参照が正しく設定されていない可能性があります。あなたは、ブートストラップから期待する結果が得られない理由が原因あなたは、リソースが不足してする可能性がある

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="footer"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-xs-4"> 
 
     <h4>Instagram</h4> 
 
     <a href="#" target="_blank"><img src="img/instagram.png"></a> 
 
     </div> 
 
     <div class="col-xs-4"> 
 
     <h4>Facebook</h4> 
 
     <a href="#" target="_blank"><img src="img/facebook.png"></a> 
 
     </div> 
 
     <div class="col-xs-4"> 
 
     <h4>LinkedIn</h4> 
 
     <a href="#" target="_blank"><img src="img/linkedin.png"></a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

出典

2017-06-26 17:38:53

私はdidn; tは前にリファレンスを設定しました。 –

@MariuszS。 OKクール= D –

ブートストラップグリッド3の列のレイアウトが機能しません

答えて

関連する問題