gpt4 book ai didi

javascript - 移动 View 中重叠的 Bootstrap 内容

转载 作者:行者123 更新时间:2023-11-28 05:07:04 25 4
gpt4 key购买 nike

  <!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

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

<meta name="description" content="">

<meta name="author" content="">

<title>BUNNY'S WEBSITE</title>

<!-- Bootstrap Core CSS -->

<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- Custom CSS -->

<link href="css/chiru.css" rel="stylesheet">

<!-- jQuery -->

<script src="js/jquery.js"></script>

<!-- Bootstrap Core JavaScript -->

<script src="js/bootstrap.min.js"></script>

<!-- Scrolling Nav JavaScript -->

<script src="js/jquery.easing.min.js"></script>

<script src="js/scrolling-nav.js"></script>

<style>

body {
width: 100%;

height: 100%;
}

html {
width: 100%;

height: 100%;
}

@media(min-width:767px) {

.navbar {

padding: 20px 0;

-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;

-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;

transition: background .5s ease-in-out,padding .5s ease-in-out;

}

.top-nav-collapse {

padding: 0;
}
}

.intro-section {

height: 100%;

padding-top: 100px;

text-align: center;

background: #fff;
}

.services-section {

height: 100%;

padding-top: 100px;

text-align: center;

background: #eff5f5;

}

.contact-section {

height: 100%;

padding-top: 100px;

text-align: center;

background: #eee;

}

.footer-section {

padding-top: 100px;

text-align: center;

background: #fff;


}

</style>



</head>



<!-- The #page-top ID is part of the scrolling feature - the data-spy and data-
target are part of the built-in Bootstrap scrollspy function -->



<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">



<!-- Navigation -->

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

<div class="container">

<div class="navbar-header page-scroll">

<button type="button" class="navbar-toggle" data-
toggle="collapse" data-target=".navbar-ex1-collapse">

<span class="sr-only">Toggle navigation</span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

<a class="navbar-brand page-scroll" href="#page-top">Seminar
Support</a>

</div>



<!-- Collect the nav links, forms, and other content for toggling --
>

<div class="collapse navbar-collapse navbar-ex1-collapse">

<ul class="nav navbar-nav">

<!-- Hidden li included to remove active class from about
link when scrolled up past about section -->

<li class="hidden">

<a class="page-scroll" href="#page-top"></a>

</li>

<li>

<a class="page-scroll" href="#intro">Home</a>

</li>

<li>

<a class="page-scroll"
href="#services">Services</a>

</li>

<li>

<a class="page-scroll" href="#Topics">Topics</a>

</li>

<li>

<a class="page-scroll"
href="#contact">ContactUs</a>

</li>

</ul>

<ul class="nav navbar-nav navbar-right">

<li><a href="#"><span class="glyphicon glyphicon-user">
</span> Sign Up</a></li>

<li><a href="#"><span class="glyphicon glyphicon-log-in">
</span> Login</a></li>

</ul>

</div>

<!-- /.navbar-collapse -->

</div>

<!-- /.container -->

</nav>



<!-- Intro Section -->

<section id="intro" class="intro-section">

<div class="container text-center">

<h1>Let’s Make The Best Presentation</h1>

<p>make a better presentation | know latest topics | know tips</p>

<button type="button" class="btn btn-primary">Get Started</button>

<a href="#">Learn more</a><br/>

<img src="E:\html\Project\fonts\sslogo.png" alt="Cinque Terre" width="270"
height="200">

</div>

</section>





<!-- Services Section -->

<section id="services" class="services-section">

<div class="container-fluid">

<div class="row">



<div class="col-sm-3">

<div class="lecture text-center">

<span class="process-icon ilecture">&nbsp;</span>

<h2>Lecture</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.<p>

<button type="button" class="btn"> Read More </button>

</div>

</div>



<div class="col-sm-3">

<div class="Tip’s text-center">

<span class="process-icon iTip’s">&nbsp;</span>

<h2>Tip’s</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.<p>

<button type="button" class="btn"> Read More </button>

</div>

</div>



<div class="col-sm-3">

<div class="Ppt’s text-center">

<span class="process-icon iPpt’s">&nbsp;</span>

<h2>Ppt’s</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.<p>

<button type="button" class="btn"> Read More </button>


</div>

</div>


<div class="col-sm-3">

<div class="Topic’s text-center">

<span class="process-icon iTopic’s">&nbsp;</span>

<h2>Topic’s</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.<p>

<button type="button" class="btn"> Read More </button>

</div>



</div>

</div>

</section>

<!-- lecture tips ppts topics -->



<!-- Contact Section -->

<section id="contact" class="contact-section">

<div class="container">

<div class="row">

<div class="col-sm-12 text-center">

<h2 class="section-heading">Contact Us</h2>

<h3 class="section-subheading text-muted">We are always
ready to help you</h3>

</div>

</div>

<div class="row">

<div class="col-sm-12">

<form name="sentMessage" id="contactForm" novalidate>

<div class="row">

<div class="col-md-6">
'
<div class="form-group">

<input type="text" class="form-control"
placeholder="Your Name *" id="name" required data-validation-required-
message="Please enter your name.">

<p class="help-block text-danger"></p>

</div>

<div class="form-group">

<input type="email" class="form-control"
placeholder="Your Email *" id="email" required data-validation-required-message="Please enter your email address.">

<p class="help-block text-danger"></p>

</div>

<div class="form-group">

<input type="tel" class="form-control"
placeholder="Your Phone *" id="phone" required data-validation-required-
message="Please enter your phone number.">

<p class="help-block text-danger"></p>

</div>

</div>



<div class="col-md-6">

<div class="form-group">

<textarea class="form-control"
placeholder="Your Message *" id="message" required data-validation-required-
message="Please enter a message."></textarea>

<p class="help-block text-danger"></p>

</div>

</div>

<div class="clearfix"></div>

<div class="col-sm-12 text-center">

<div id="success"></div>

<button type="submit" class="btn btn-xl">Send
Message</button>

</div>

</div>

</form>

</div>

</div>

</div>

</section>





<footer id="footer" class="footer-section">

<div class="container">

<div class="row">



<div class="col-sm-12 text-center">





<ul class="footer-links list-inline">

<li><a href="#">Home</a></li>

<li><a href="#">AboutUs</a></li>

<li><a href="#">Topics</a></li>

<li><a href="#">Blog</a></li>

<li><a href="#">ContactUs</a></li>

</ul>



<div>

<button type="button" href="#" class="btn btn-primary twitter"><span
class="social-sprite twitter">&nbsp;</span>Follow us on Twitter</button>

<button type="button" href="#" class="btn btn-primary facebook"><span
class="social-sprite twitter">&nbsp;</span>Like us on Facebook</button>

</div>



<small> &copy; <a href="#">Seminar Support</a> 2016</small>

</div>

</div>

</footer>





</body>

</html>

最佳答案

使用所有网格类,如 col-lg、col-md、col-sm、col-xs 而不是 col-sm-3

关于javascript - 移动 View 中重叠的 Bootstrap 内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39786118/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com