当窗口大于990px时，如何让jumbotron出现在我的glyphcons下面？ [英] How do i make the jumbotron appear below my glyphcons when the window is bigger than 990px?
本文介绍了当窗口大于990px时，如何让jumbotron出现在我的glyphcons下面？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
.center {
text-align: center;
}
#myCarousel {
height: 200px;
}
.carousel-indicators {
bottom: 0;
}
.carousel-indicators .active {
background-color: #222;
}
.carousel-indicators li {
border-color: #222;
}
.glyphicon {
font-size: 50px;
color: grey;
}
p {
color: black;
}
</style>
</head>
<body>
<div id="myCarousel" class="carousel slide jumotron">
<div class="container">
<ol class="carousel-indicators">
<li class="active" data-target="#myCarousel" data-slide-to="0"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active center">
<h1>Hello</h1>
</div>
<div class="item center">
<h1>HI</h1>
</div>
<div class="item center">
<h1>Hola</h1>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
<div id="container2" class="container">
<div class="row center">
<div id="aboutMe" class="col-md-4">
<span class="glyphicon glyphicon-user"></span>
<h4>About Me</h4>
<p>My name is Russ.</p>
</div>
<div id="aboutMeJumboxs" class="jumbotron">
<h1>hi</h1>
</div>
<div id="testimonies" class="col-md-4">
<span class="glyphicon glyphicon-envelope"></span>
<h4>Testimonies</h4>
<p>My name is Russ.</p>
</div>
<div id="testimoniesJumboxs" class="jumbotron">
<h1>hi</h1>
</div>
<div id="listings" class="col-md-4">
<span class="glyphicon glyphicon-home"></span>
<h4>Listings</h4>
<p>My name is Russ.</p>
</div>
<div id="listingsJumboxs" class="jumbotron">
<h1>hi</h1>
</div>
</div>
</div>
<div class="container">
<div id="aboutMeJumbo" class="jumbotron">
<h1>hi</h1>
</div>
<div id="testimoniesJumbo" class="jumbotron">
<h1>hi</h1>
</div>
<div id="listingsJumbo" class="jumbotron">
<h1>hi</h1>
</div>
</div>
<script>
$("#aboutMeJumbo").hide();
$("#testimoniesJumbo").hide();
$("#listingsJumbo").hide();
$("#aboutMeJumboxs").hide();
$("#testimoniesJumboxs").hide();
$("#listingsJumboxs").hide();
if ($(window).width() > 992) {
$("#aboutMe").click(function() {
$("#aboutMeJumbo").toggle();
});
$("#testimonies").click(function() {
$("#testimoniesJumbo").toggle();
});
$("#listings").click(function() {
$("#listingsJumbo").toggle();
});
};
if ($(window).width() < 993) {
$("#aboutMe").click(function() {
$("#aboutMeJumboxs").toggle();
});
$("#testimonies").click(function() {
$("#testimoniesJumboxs").toggle();
});
$("#listings").click(function() {
$("#listingsJumboxs").toggle();
});
};
</script>
</body>
</html>
我尝试了什么：
我用Google搜索了这个多个时间和当我更换一些东西时，不到990将起作用。大于990的其他时间可以使用，但不能使用相同的代码。
What I have tried:
I have googled this multiple times and when I replace somethings the less than 990 will work. Other times on the larger than 990 will work but not both with the same code.
推荐答案
（ ＃aboutMeJumbo）。hide（）;
("#aboutMeJumbo").hide();
（ ＃testimoniesJumbo）。hide（）;
("#testimoniesJumbo").hide();
（ ＃listingsJumbo）。hide（）;
("#listingsJumbo").hide();
这篇关于当窗口大于990px时，如何让jumbotron出现在我的glyphcons下面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
