33
私はブートストラップページでこの邪魔な水平スクロールを持っています。それが何のように振る舞っているのか、それについて何をすべきかを理解できませんか？ブートストラップ3でこの水平スクロールバーを取り除く方法
JsFiddleリンク：http://jsfiddle.net/FatAlbert/cd1syrd9/2/
HTML：
<body>
<div class="wrapper">
<div class="row">
<div class="header">
<div class="container">
<!-- navigation-->
<nav class="navbar navbar-default">
<div class="container-fluid">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">Meny</button>
<a class="navbar-brand" href="#"><img src="xxx" /></a>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Start <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
</nav><!--/navigation-->
</div>
</div><!--/header-->
</div><!--/container-->
<div class="row">
<div class="first-page-content">
<div class="container">
<img class="img-responsive img-big" src="xx" />
<p>
Lorem ipsum dolor sit amet, arcu nulla. Maecenas congue, felis leo et, pulvinar sollicitudin lacinia libero rhoncus, nam dolor, velit leo ullamcorper massa. Risus netus facilisis tempus mollis, nullam nibh ridiculus potenti donec pulvinar proin. Sit in ultrices sed orci pellentesque, nunc tempor fusce fusce ultrices felis molestie. Lorem nam pellentesque integer urna nam.
</p>
</div>
</div>
</div><!--/first-content-->
</div>
<div class="footer">
<div class="container">
<p class="pull-right">
Some<br />
Info<br />
</p>
</div>
</div><!-- /footer-->
</body>
CSS：
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 160px;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.5em;
}
p {
font-family: Verdana,Arial,sans-serif;
font-size: 1.05em;
line-height: 1.8;
text-align: justify;
}
a {
color: #0071BB;
font-weight: bold;
}
.wrapper {
}
.footer {
position: absolute;
padding-top: 25px;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 160px;
background-color: #5FC8FF;
}
.header .glyphicon-wrench {
margin: 0 3px;
}
.header h4 {
margin-right: 3px;
}
.img-responsive {
display: block;
margin: auto;
}
.img-responsive.img-big {
margin-top: 75px;
}
.navbar {
border: none;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
.navbar-default .navbar-nav > li {
width: 150px;
margin-right: 2px;
}
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav > li > a:hover {
color: #fff;
font-weight: bold;
background-color: #92C7E1;
}
.navbar-default .navbar-nav > li > a:hover {
background-color: #98CEE5;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: #fff;
background-color: #98CEE5;
}
a.navbar-brand {
padding: 5px;
}
.row {
}
.alert {
}
.well {
}
.footer p {
font-weight: bold;
color: #FDFDFB;
}
@media (min-width: 992px) {
}
@media (min-width: 768px) {
.first-page-content p {
margin: 75px auto 25px auto;
width: 524px;
}
}
あなたは、水平スクロールを意味していますか？縦スクロールは、コンテンツが視点を通り越していつでも現れるようになります。 – jmore009
横 - はい。 tnx @ jmore009 – FatAlbert
私のコメントを見てください。CSSにこのコードを追加するだけで、水平スクロールバーが完全に無効になります。 – vasanth