Question

我使用bootstrap http://www.grisard.ch/uferstrasse/imfoyeru90/

创建了这个单页

我需要的是删除水平滚动。我认为代码没问题。这是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; }

        }

Answer 1

出现水平滚动条，因为您的内容对于广告来说太宽。检查元素的宽度。更快的解决方案是限制body的宽度，滚动条就会消失。

在您的情况下，

body { width: 98% }可以正常工作。您还可以使用body { overflow-x : hidden}，只需隐藏滚动条，如果您确定没有水平滚动需要访问的内容。

Answer 2

您可以使用overflow-x:hidden;删除水平滚动条，但这不是一个好习惯，您网站的问题是margin-right和margin-left -15px;您可以通过删除＆＃34;行和流体＆＃34;来移除此水平滚动条。在这里，我做了一个GIF来展示问题及其解决方案。

Answer 3

你应该将它添加到正文样式：

 overflow: hidden;

Answer 4

标记存在问题。右侧面板上的行和列未正确排列。当我看到你与firebug的链接..我发现在右面板行和列没有正确安排。请检讨一下。修复此问题将解决您的问题。刚用firebug进行了同样的测试。您还使用两个版本的bootstrap。只使用最新版本。

删除水平滚动条

4 个答案: