删除水平滚动条

安东尼奥兹

我已经用引导程序制作了此页面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 &#x2013 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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章