<!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"> </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"> </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"> </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"> </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"> </span>Follow us on Twitter</button>
<button type="button" href="#" class="btn btn-primary facebook"><span
class="social-sprite twitter"> </span>Like us on Facebook</button>
</div>
<small> © <a href="#">Seminar Support</a> 2016</small>
</div>
</div>
</footer>
</body>
</html>
Q
引導內容重疊
0
A
回答
0
使用像COL-LG,COL-MD,COL-SM,COL-XS,而不是所有網格類COL-SM-3
+0
謝謝,但是如何爲特定行添加不同類型的網格類? – user559392
+0
我在特定div塊中提供的內容超出了該塊,並在移動視圖中進入了下一個塊。因此,我試圖增加CSS的高度百分比,然後在桌面視圖中,該div塊的剩餘空間將爲空。任何人都可以幫助我解決這個問題,請。 – user559392
相關問題
- 1. 引導固定側邊欄導致主要內容重疊
- 2. 內容重疊
- 3. 內容/重疊
- 4. 導航和內容重疊的問題
- 5. 導航菜單中的內容重疊?
- 6. 頁腳導航欄重疊內容
- 7. 固定導航重疊主要內容
- 8. 導航欄重疊內容文字
- 9. 導航欄下拉內容重疊
- 10. 引導列重疊
- 11. 動態引導程序3 navbar固定頂部重疊內容
- 12. 內容重疊div
- 13. CSS內容重疊
- 14. 內容重疊BottomNavigationView
- 15. Tabview內容重疊
- 16. FragmentLayout重疊內容
- 17. DIV內容重疊
- 18. Div內容與表格內容重疊
- 19. 引導程序中的靜態水平導航欄與內容區域重疊
- 20. 引導重疊圖像thumbail
- 21. 一些引導列重疊
- 22. 引導模態重疊
- 23. 防止HTML內容重疊
- 24. GXT ScrollBar重疊內容
- 25. 與flexbox重疊的內容
- 26. 內容IN UILABEL重疊
- 27. 內容重疊頁腳
- 28. 的UIScrollView重疊MAINVIEW內容
- 29. SSRS 2008 IE11內容重疊
- 30. 工具欄重疊內容
請重新格式化您的問題。我不會讀這個。 –
代碼格式非常糟糕,如果您還可以提供屏幕截圖,這將會很有幫助。 –
我在特定div區塊中提供的內容超出了該區塊,並進入了移動視圖中的下一個區塊。因此,我試圖增加CSS的高度百分比,然後在桌面視圖中,該div塊的剩餘空間將爲空。任何人都可以幫助我解決這個問題,請。 – user559392