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问题，菜单问题

回答

相关问题