如何讓我的標題設置使用引導？

在使用引導程序或任何HTML時，我是一個完整的noob。我爲我的高中機器人團隊製作了一個簡單的橫幅，使用photoshop和一個簡單的導航欄，但我無法理解引導程序的網格系統。出於某種原因，我的導航欄正在切斷我的旗幟。我需要導航欄下方的橫幅，我將如何使用引導程序執行此操作？如何讓我的標題設置使用引導？

<!DOCTYPE html> 
<html> 
<head> 

<title>Robotics Team 3774 Home</title> 

<!-- Link to stylesheet --> 
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css"> 
<link rel="stylesheet" type="text/css" href="css/index1.css"> 


<!-- Mobile Scaling --> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 

</head> 

<body> 

<!-- Navbar --> 

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <a class="navbar-brand" href="#">Team 3774</a> 
     </div> 
     <div class="navbar-collapse collapse" style="height: 0.866667px;"> 
      <ul class="nav navbar-nav"> 
       <li><a href="#">Team Bio</a></li> 
       <li><a href="#">Our Robot</a></li> 
       <li><a href="#">Our Coach</a></li> 
       <li><a href="#">Gallery</a></li> 
       <li><a href="#">Outreach</a></li> 
       <li><a href="#">Youtube</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 

<!-- Banner --> 
<div class="banner"> 
    <img src="Banner.png" class="img-responsive" alt="Responsive image"> 
</div> 




</body>

來源

2014-10-28 Hive Voltage

如果你想看到它，網站是www.robotichive3774.com。 – 2014-10-28 16:39:28

引導並沒有真正有一面旗幟元素中的旗幟，網格系統並不必然地涉及到將一個項目一樣，進入你的頁面。如果你想要一個像導航欄那樣橫跨頁面的橫幅，那麼你可能想看看他們的Jumbotron元素。你真正需要做的是一個「超大屏幕」像這樣替換你的「旗幟」類：

<!-- Banner --> 
<div class="jumbotron"> 
    <img src="Banner.png" class="img-responsive" alt="Reponsive image" /> 
</div>

然後你只需要添加一點點的定製造型隱藏灰色的背景，讓您的橫幅圖像佔用屏幕寬度：

.jumbotron { 
    padding-left:0; 
    padding-right:0; 
    padding-bottom:0; 
}

應該這樣做。一旦我看到你發佈了鏈接到你的網站，我不得不編輯我的答案。

演示Here

來源

2014-10-28 16:40:26

啊哈，這就是我一直在尋找的！非常感謝！ – 2014-10-28 16:51:51

包括集裝箱電子標籤

<head> 

<title>Robotics Team 3774 Home</title> 

<!-- Link to stylesheet --> 
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css"> 
<link rel="stylesheet" type="text/css" href="css/index1.css"> 


<!-- Mobile Scaling --> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 

</head> 

<body> 

<!-- Navbar --> 

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <a class="navbar-brand" href="#">Team 3774</a> 
     </div> 
     <div class="navbar-collapse collapse" style="height: 0.866667px;"> 
      <ul class="nav navbar-nav"> 
       <li><a href="#">Team Bio</a></li> 
       <li><a href="#">Our Robot</a></li> 
       <li><a href="#">Our Coach</a></li> 
       <li><a href="#">Gallery</a></li> 
       <li><a href="#">Outreach</a></li> 
       <li><a href="#">Youtube</a></li> 
      </ul> 
     </div> 
    </div> 
    <!-- Banner --> 
<div class="banner"> 
    <img src="Banner.png" class="img-responsive" alt="Responsive image"> 
</div> 
</div>

來源

2014-10-28 16:39:29 ahhmarr

以下行只需添加到您的CSS：

body 
{ 
    padding-top:50px; 
}

，你應該是好去。

當使用navbar-fixed-top時，通常在Bootstrap中完成。

來源

2014-10-28 16:51:35 Ranveer

如何讓我的標題設置使用引導？

回答

相關問題