2015-10-12 35 views
0

我已經與引導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; } 

     } 
+0

只需將此代碼複製到您的CSS,它將禁用您的水平滾動條。 'body {overflow-x:hidden;}' – vasanth

回答

2

水平滾動條出現,因爲您的內容對於屏幕來說太寬。檢查你的元素的寬度。 更快的解決方案是限制您的寬度,滾動條將不再顯示。

body { width: 98% }工作正常在你的情況。如果您確定沒有需要通過水平滾動訪問的內容,也可以使用body { overflow-x : hidden}並隱藏滾動條。

+0

完成。謝謝:) – Antonioz

0

你應該添加這體型:

overflow: hidden; 
2

您可以使用overflow-x:hidden;刪除水平滾動條,但這不是一個好習慣,您的網站的問題是margin-right和margin-left -15px;你可以通過刪除「行和流體」類來移除這個水平滾動條,在這裏我做了一個GIF來展示問題和解決方案。

enter image description here

+1

做得好的Shehroz,它運作良好! – vasanth

0

沒有與標記..行和列的問題沒有妥善安排右側面板上。當我看到你的鏈接與螢火蟲..我發現在右側面板行和列沒有正確安排。請檢查它。解決這個問題將解決您的問題。只用螢火蟲測試過。你也使用兩個版本的引導程序。只使用最新的一個。