2014-02-12 54 views
0

我不知道爲什麼,但在使用Twitter Bootstrap 3製作的網站上出現奇怪的邊距。 如果我刪除導致它的元素,則邊距消失。但元素(圖像)放置正確。如何擺脫Twitter Bootstrap 3中的特定邊距?

元素是,我用紅色箭頭here(與女人&嬰兒的第三張圖片)標記。

我寫了如下代碼:

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-4 col-md-4 col-lg-4"> 
      <div id="esc1"> 
      <img class="img-responsive center-block" alt="" src="img/escuela-1.png"></div> 
     </div> 
     <div class="col-xs-4 col-md-4 col-lg-4"> 
     <div id="esc2"> 
      <img class="img-responsive center-block" alt="" src="img/escuela-2.png"></div> 
     </div> 
     <div class="col-xs-4 col-md-4 col-lg-4"> 
     <div id="esc3">   
      <img class="img-responsive center-block" alt="" src="img/escuela-3.png"></div> 
     </div> 
    </div> 
    </div> 

網站的網址:Here

誰能幫助我?提前致謝!

+0

你調查了嗎? - http://prntscr.com/2ruvgl – Nix

回答

0
<div class="row"> 
      <div class="container"> 
      <div class="row"> 
       <div class="col-xs-12 col-md-12 col-lg-12"> 
        <div id="cartel2"> 
        <div class="cartel-img"><img class="img-responsive center-block" alt="" src="img/cartel-centros-solo.png"> </div> 
        </div> 

科應該是:

<div class="**container**"> 
      <div class="**row**"> 
       <div class="col-xs-12 col-md-12 col-lg-12"> 
        <div id="cartel2"> 
        <div class="cartel-img"><img class="img-responsive center-block" alt="" src="img/cartel-centros-solo.png"> </div> 
        </div> 

這使得邊際d對我來說是顯而易見的。

+0

非常感謝! :D –

+0

正確的解決方案,我張貼在你面前;) –

2

<div class="col-xs-12"></div>包裝你的div的行內。現在你要告訴divs以四塊一塊顯示,沒有任何東西可以分解。

由於如果將網格定義爲col-xs-4,則BS3首先是移動的,因此不需要定義col-md和col-lg。如果您希望它在更大的屏幕上顯示不同,您只需要這樣做。
希望這會有所幫助。

+0

不明白...我曾嘗試將

放入這些div的容器中,但仍然存在同樣的問題... 而我想將它分成3個圓柱如果沒有,則三個圖像每行顯示一個 –

0

你的問題是關於圖像下的方框:

<div class="row"> 
      <div class="container"> 
       <div class="col-xs-12 col-md-12 col-lg-12"> 
        <div class="escuela-def"> 
         <p>La primera y principal razón de ABC KINDERGARTEN es el reconocimiento del niño/a como sujeto desde el momento de su nacimiento.<br> 
En ésta escuela se da una educación integral, que abarca todas las áreas en las que el niño pueda ser estimulado desde pequeño, para alcanzar su máximo desarrollo en un marco bilingüe conectado con la familia.</p> 
      ... 

        </div> 
       </div> 
      </div> 
     </div> 

你需要逆.row和.container,請參見下面的代碼:

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-12 col-md-12 col-lg-12"> 
         ... 

     </div> 
    </div> 
</div> 
+0

對於「Galeríadeimágenes」也是如此。 –