引導程序崩潰和背景圖像響應不起作用

在我的代碼中，當屏幕大小發生變化時，會出現摺疊圖標，但是當我單擊該圖標時，沒有任何內容可見。引導程序崩潰和背景圖像響應不起作用

另一個問題是我想要部分元素的背景是圖像，所以我在css中添加了背景圖像，但是這不起作用。

body { 
 
\t padding-top: 70px; 
 
} 
 
.navbarhead{ 
 
\t background-color: #BDBDBD; 
 
\t 
 
\t height: 100px; 
 
\t border-style: solid; 
 
\t border-right: none; 
 
\t border-top: none; 
 
\t border-left: none; 
 
\t 
 
} 
 

 
#navitem{ 
 
\t font-size: 20px; 
 
\t color: black; 
 
} 
 

 
.btn-small{ 
 
padding:10px 25px; 
 
} 
 

 
#btnin, #btnin:hover,#btnin:focus { 
 
color: #fff; 
 
font-family: 'open_sanssemibold'; 
 
font-size:20px; 
 
background-color:black; 
 
text-decoration:none; 
 

 
} 
 

 
#btnup, #btnup:hover,#btnup:focus { 
 
color: black; 
 
font-family: 'open_sanssemibold'; 
 
font-size:20px; 
 
background-color:white; 
 
text-decoration:none; 
 

 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
\t <title>ShortFundly-LeaderBoard</title> 
 
\t <meta http-equiv=X-UA-Compatible content="IE=edge"> 
 
    <meta name=viewport content="width=device-width, initial-scale=1.0"> 
 
    <!-- Viewport Meta Tag --> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <!-- Bootstrap CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
    <link rel="stylesheet" href="css/bootstrap.css" media="screen"> 
 
    <!-- Style sheet --> 
 
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" media="screen"> 
 
    <link rel="stylesheet" type="text/css" href="css/leaderboard.css" media="screen"> 
 
    <link rel="stylesheet" type="text/css" href="css/leaderboard-responsive.css" media="screen"> 
 
</head> 
 
<body> 
 
\t 
 
     <!--navbar starts--> 
 
     
 
     <nav class="navbar navbar-toggleable-md navbar-light bg-faded fixed-top navbarhead"> 
 
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="true" aria-label="Toggle navigation"> 
 
      <span class="navbar-toggler-icon"></span> 
 
      </button> 
 
      <div class="collapse in navbar-collapse" id="navbarTogglerDemo01"> 
 
       <a class="navbar-brand" href="https://www.shortfundly.com"> 
 
        <img src="https://www.shortfundly.com/tpl/main/v4/images/logo.svg" class="img-fluid" alt="Shortfundly Logo" />  
 
       </a> 
 
       <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> 
 
        <li class="nav-item" id="navitem"> 
 
         <a class="nav-link" href="#">Community</a> 
 
        </li> 
 
        <li class="nav-item" id="navitem"> 
 
         <a class="nav-link" href="#">Collaborate</a> 
 
        </li> 
 
        <li class="nav-item" id="navitem"> 
 
         <a class="nav-link">LeaderBoard</a> 
 
        </li> 
 
       </ul> 
 
       <ul class="nav navbar-nav navbar-right my-lg-0 m-0"> 
 
        <li><a href="" class="btn my-sm-0 my-2 btn-lg"       id="btnin">sign in</a></li> 
 
        <li><a href="" class="btn my-sm-0 btn-lg m-4"        id="btnup">sign up</a></li> 
 
       </ul> 
 
      </div> 
 
     </nav> 
 
     <!--navbar ends--> 
 
     
 
     <!-- HEADING STARTS --> 
 
     <section style="background-image: url('banner.png');margin-top: 100px;"> 
 
     <div class="container"> 
 
      <div class="Jumbotron"> 
 
       <h1>My Jumbotron</h1> 
 
       <p>Think BIG with a Bootstrap Jumbotron!</p> 
 
      </div> 
 
     </div> 
 
     </section> 
 
     
 
     <!--HEADING ENDS--> 
 
     
 
</body> 
 
</html>

mgur.com/CE0Fm.jpg

來源

2017-07-15 archana

在你的部分添加這兩個腳本，引導不起作用，如果您還沒有定義jQuery和bootstrap.js腳本

<script src="https://code.jquery.com/jquery-3.2.1.min.js"

完整性= 「SHA256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4 =」 crossorigin =「匿名「>

來源

2017-07-15 12:58:45 Bangash

謝謝，works.but這樣的背景圖像不工作。 – archana

你需要給它一些高度，在你的代碼高度添加這個屬性：500px; – Bangash

確保您已將所有Bootstrap 4 cdns添加到您的項目中。看起來你錯過了必要的JavaScript。

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

另外，我會在你的CSS從.navbarhead刪除height: 100px;以確保摺疊菜單顯示正常。

你也應該在崩潰臨界點的良好措施某些樣式添加到您的.navbar-brand。在非常小的屏幕上，我會從您的登錄按鈕上取下保證金。在這裏使用!important是不好的做法，但有時在對邊緣案例進行重寫時有用。

@media screen and (max-width: 992px) { 
    .navbar-brand { 
    align-self: flex-end; 
    margin-top: -2.5rem; 
    } 
    .m-4 { 
    margin: 0 !important; 
    } 
}

見：CodePen Demo

來源

2017-07-15 13:20:24

引導程序崩潰和背景圖像響應不起作用

回答

相關問題