Question

在我的代码中，当屏幕大小发生变化时，会出现折叠图标，但是当我点击该图标时，没有任何内容可见。

另一个问题是我想要将section元素的背景作为图像，所以我在css中添加了background-image但是它没有工作。

＆＃13;

body { 
	padding-top: 70px; 
}
.navbarhead{
	background-color: #BDBDBD;
	
	height: 100px;
	border-style: solid;
	border-right: none;
	border-top: none;
	border-left: none;
	
}

#navitem{
	font-size: 20px;
	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;

}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
	<title>ShortFundly-LeaderBoard</title>
	<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>
	
        <!--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>

＆＃13;

mgur.com/CE0Fm.jpg

Answer 1

在您的部分中添加这两个脚本，如果您尚未定义jquery和bootstrap.js脚本，则bootstrap不起作用

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

完整性= “SHA256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4 =” crossorigin = “匿名” ＆GT;

Answer 2

确保已将所有Bootstrap 4个cdns添加到项目中。您似乎错过了必要的JavaScripts。

<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中height: 100px;删除.navbarhead，以确保正确显示折叠的菜单。

您还应该在崩溃中断点为.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

bootstrap崩溃和背景图像响应不起作用

2 个答案: