我已经用引导程序制作了此页面http://www.grisard.ch/uferstrasse/imfoyeru90/
我需要的是消除水平滚动。我认为代码还可以。Thi是HTML和CSS:
HTML:
<div class="container-fluid">
<div class="row fluid">
<div class="col-md-6 simona">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></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"> <img src="img/simona.jpg" style="width:100%" alt="First slide">
</div>
<div class="item"> <img src="img/simona2.jpg" style="width:100%" data-src="" alt="Second slide">
</div>
<div class="item"> <img src="img/simona3.jpg" style="width:100%" data-src="" alt="Third slide">
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> </div>
</div>
<div class="col-md-6 logo">
<img class="img-responsive" src="img/logo.png" />
</div>
<div class="col-md-6 date">
<h3><br>
Uferstrasse 90, 4057 Basel</h3>
<h5 class="date">28.10.2015 – 09.12.2015 </h5>
</div>
<div class="row">
<div class="col-md-6">
<div class="col-md-3 dates"><p><strong></b>Vernissage:</strong><br>26.10.2015<br>18.00–20.00 Uhr</p></div>
<div class="col-md-3 dates"><p><strong>Lesung:</strong><br>16.11.2015<br>18.00 Uhr</p></div>
<div class="col-md-3 dates"><p><strong>Finissage:</strong><br>07.12.2015<br>18.00–20.00 Uhr</p></div>
<div class="col-md-8"> <p class="bio">Bild eins: «unsagbar»
aus dem Zyklus «Ahnengalerie»
Raffaello hat sie geküsst
Leonardo war beim Vesper
zugegen. Hinter dem Vorhang kommt sie auf eine neue Idee.
Sie könnte als Skulptur leben.
In meiner Malerei geht es um
Formen von Lebenserfahrungen.
Um die Sehnsucht, das Unsagbare darstellen zu können. Und um die Unerträglichkeit, dafür niemals erlösende Bilder zu finden.
Was geschieht - ich lasse mich ins Unterbewusstsein fallen und finde Fragmente.
Künstlerin:
Simona Deflorin.</p></div>
</div>
</div>
</div>
</div>
CSS:
.col-md-6 { }
.col-md-4 { }
.date { margin-top: 15px; }
.col-md-2 { }
.logo { padding-top: 15px; }
.simona { padding-top: 15px; }
.col-md-8 { padding-left: 0 !important; }
.simo { padding-left: 0 !important; top: 15px; }
.dates { padding-left: 0 !important; }
.date { font-size: 1.645em; }
.bio { margin-top: 15px; }
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
.dates { padding-left: 15px !important; }
.bio { padding-left: 15px !important; }
}
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
.dates { padding-left: 15px !important; }
.bio { padding-left: 15px !important; }
}
由于您的内容对于屏幕而言太宽,因此出现水平滚动条。检查元素的宽度。一种更快的解决方案是只限制您body
的宽度,滚动条将消失。
body { width: 98% }
在您的情况下可以正常工作。body { overflow-x : hidden}
如果您确定没有需要水平滚动访问的内容,则也可以使用并仅隐藏滚动条。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句