37
Bootstrap'u öğreniyorum. Başlangıç menüsünde, verilen birkaç şablon var. Ben bununla oynuyorum. Bir örnek sabit Footer ile ilgilidir. Önceki örnekte nav kullandım ve bunu sabit altbilgi ile ayarlamak istedim. Ancak dikey kaydırma çubuğu geliyor. Dikey Kaydırma Çubuğuna neden olan elemanı arıyorum.Hangi HTML Öğesinin Dikey Kaydırma Çubuğuna Neden Olduğunu Bilinme
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<style type="text/css">
/* Sticky footer styles
-------------------------------------------------- */
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by it's height */
margin: 0 auto -60px;
}
/* Set the fixed height of the footer here */
#push,
#footer {
height: 60px;
}
#footer {
background-color: #f5f5f5;
}
/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
#footer {
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
}
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
.container {
width: auto;
max-width: 680px;
height: auto;
}
.container .credit {
margin: 20px 0;
}
/* Adjust Nav */
#wrap > .container {
margin-top: 60px;
}
</style>
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="ico/favicon.png">
</head>
<body>
<div id="wrap">
<div class="navbar navbar-inverse navbar-fixed-top" >
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<h1>Bootstrap starter template</h1>
<p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
</div> <!-- /container -->
<div id="push"></div>
</div> <!-- End Wrap -->
<div id="footer">
<div class="container">
<p class="muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
</div>
</div>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../jquery.js"></script>
<script src="js-ext/bootstrap-transition.js"></script>
<script src="js-ext/bootstrap-alert.js"></script>
<script src="js-ext/bootstrap-modal.js"></script>
<script src="js-ext/bootstrap-dropdown.js"></script>
<script src="js-ext/bootstrap-scrollspy.js"></script>
<script src="js-ext/bootstrap-tab.js"></script>
<script src="js-ext/bootstrap-tooltip.js"></script>
<script src="js-ext/bootstrap-popover.js"></script>
<script src="js-ext/bootstrap-button.js"></script>
<script src="js-ext/bootstrap-collapse.js"></script>
<script src="js-ext/bootstrap-carousel.js"></script>
<script src="js-ext/bootstrap-typeahead.js"></script>
</body>
</html>
Eleman Kaydırma Çubuğu neden olan bilmek bu durumlarda çalışan herhangi bir hile var mı: İşte
HTML'dir? Daha önce benzer bir problemle karşılaştım, kolay bir çözüm bulabildiğimi hatırlamıyorum.
Bu doğanın sorunlarını çözmenin en iyi yolu, denetçiye gitmek ve kaydırma çubuğu gidene kadar öğeleri silmeye başlamaktır. – Conqueror
@ Conqueror Tam olarak 10 dakika önce aynı cevabı da yayınladım. Ama teşekkürler. Daha fazlası için… –