Bootstrap網格3列布局不起作用

我想我到處都看，並嘗試了一切。我想爲一個有3列的網站製作頁腳 - 每個頁面都有h4標題和圖片（png圖標）。而不是獲得3列，我有1列與堆疊在一起的所有東西。 HTML代碼：Bootstrap網格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工作嗎？ –

嘗試col-md或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>

應該

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

有關的img有不需要與/ REF關閉：Do I need a "/" at the end of an <img> or <br> tag, etc.?

第2：使用col-xs-4如果您希望它們始終是一行中的3個項目。（如果沒有其他定義（lg/md/sm等），所有屏幕尺寸都將落入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

我沒有;之前設置參考 - 現在全部排序，非常感謝！ –

@MariuszS。好吧，酷= D –

Bootstrap網格3列布局不起作用

回答

相關問題