Bootstrap問題，菜單問題

-1

我想製作帶圖片的菜單欄。但我的照片不動。我認爲我的Bootstrap是錯誤的或其他的東西。我沒有找到問題。Bootstrap問題，菜單問題

它應該是這個樣子：

[這是設計] [1]

<head> 
 
     <meta charset="UTF-8"> 
 
     <title>Testing</title> 
 
     <link href="style.css"> 
 
     <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css"> 
 
     <link href="bootstrap-3.3.7-dist/css/bootstrap.css"> 
 
     <link href="bootstrap-3.3.7-dist/js/bootstrap.js"> 
 
    
 
    
 
    </head> 
 
    <body> 
 
    
 
    
 
    <div class="container"> 
 
    
 
     <div class="navbar navbar-inverse navbar-fixed-top"> 
 
     <div class="row"> 
 
    
 
      <div class="col-sm-4"> 
 
      <img src="img/home.png"> 
 
      </div> 
 
     
 
      <div class="col-sm-4"> 
 
      <img src="img/home.png"> 
 
      </div> 
 
    
 
      <div class="col-sm-4"> 
 
      <img src="img/home.png"> 
 
      </div> 
 
     
 
      <div class="col-sm-4"> 
 
      <img src="img/home.png"> 
 
      </div> 
 
     
 
      <div class="col-sm-4"> 
 
      <img src="img/home.png"> 
 
      </div> 
 
    
 
     </div> 
 
     </div> 
 
    </div> 
 
    
 
    
 
    </body> 
 
    </html>

來源

2017-04-27 Nico Kubat

不知道我理解的問題，但圖片可能沒有，因爲導航欄，固定頂部移動。列的總和也高於12. – bert

當你說「但我的照片不動」時，你的意思是沒有滾動？ –

因爲我沒有任何圖像時使用的，我換成它與文本。我希望這是你在找什麼

.col-xs-2 { 
 
    background-color: pink; 
 
    height: 200px; 
 
}

<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="container"> 
 
    <div class="navbar navbar-fixed-top"> 
 
    <div class="row"> 
 

 
     <div class="col-xs-2 col-xs-offset-1"> 
 
     <h1> SOME </h1> 
 
     </div> 
 

 
     <div class="col-xs-2"> 
 
     <h1> SOME </h1> 
 
     </div> 
 

 
     <div class="col-xs-2"> 
 
     <h1> SOME </h1> 
 
     </div> 
 

 
     <div class="col-xs-2"> 
 
     <h1> SOME </h1> 
 
     </div> 
 

 
     <div class="col-xs-2"> 
 
     <h1> SOME </h1> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 
</div>

來源

2017-04-27 07:17:07 Swellar

現在它的工作！謝謝！！但是，我怎樣才能讓空間離開，我怎樣才能選擇我自己的身高？ –

移除'col-xs-offset-1'以去除左側的空間 – Swellar

Legend！高度？ –

我通過<div class="col-xs-2 col-sm-2">

引導更換<div class="col-sm-4">是基於12列布局。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 

 
    <div class="navbar navbar-fixed-top"> 
 
    <div class="row"> 
 

 
     <div class="col-xs-2 col-sm-2"> 
 
     <img src="http://placehold.it/100x100"> 
 
     </div> 
 

 
     <div class="col-xs-2 col-sm-2"> 
 
     <img src="http://placehold.it/100x100"> 
 
     </div> 
 

 
     <div class="col-xs-2 col-sm-2"> 
 
     <img src="http://placehold.it/100x100"> 
 
     </div> 
 

 
     <div class="col-xs-2 col-sm-2"> 
 
     <img src="http://placehold.it/100x100"> 
 
     </div> 
 

 
     <div class="col-xs-2 col-sm-2"> 
 
     <img src="http://placehold.it/100x100"> 
 
     </div> 
 

 
     <div class="col-xs-2 col-sm-2"> 
 
     <img src="http://placehold.it/100x100"> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 
</div>

來源

2017-04-27 08:18:41

謝謝，我的作品！ –

太棒了！如果你願意，你可以投票回答。 –

Bootstrap問題，菜單問題

回答

相關問題