删除水平滚动条

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

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

 overflow: hidden;

Answer 2

出现水平滚动条是因为您的内容对于屏幕而言太宽。检查元素的宽度。一个更快的解决方案是只限制 body 的宽度，这样滚动条就会消失。

body { width: 98% } 适用于您的情况。如果您确定没有需要通过水平滚动访问的内容，您也可以使用 body { overflow-x : hidden} 并隐藏滚动条。

Answer 3

您可以使用 overflow-x:hidden; 删除水平滚动条，但这不是一个好的做法，您网站的问题是 margin-right 和 margin-left -15px；你可以通过删除 "row and fluid" class 来删除这个水平滚动条，这里我制作了一个 GIF 来显示问题和解决方案。

Answer 4

标记存在问题。右侧面板上的行和列排列不正确。当我看到你的 link 和 firebug.. 我发现右侧面板上的行和列没有正确排列。请审查它。解决这个问题会解决你的问题。刚刚用 firebug 进行了相同的测试。您还使用了两个版本的 bootstrap。只使用最新的。

删除水平滚动条

Delete horizontal scrollbar

html

css

scrollbar

twitter-bootstrap