使用Bootstrap的神祕空白

Im現在使用Bootstrap。只要我進入移動模式，我有一些divs之間有一些空白（身體的顏色）。使用Bootstrap的神祕空白

HTML：

<div class="container-fluid"> 
    <div class="col-md-12 winter" style="padding-top: 120px;"> 
     <h1>Hallo</h1> 
     <div class="col-md-6"> 
      <h3>Überschrift</h3> 
      <p class="justifyText">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p> 
     </div> 
     <div class="col-md-6"> 
      <h3>Überschrift</h3> 
      <p class="justifyText">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p> 
     </div> 
    </div> 
    <div class="col-md-12 winter centerText whiteText"> 
     <h3>Teil 2</h3> 
     <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p> 
    </div> 
</div>

CSS：

.winter { 
    background-color: #c8e2d2; 
    text-align: center; 
    margin-bottom: 0px; 
    margin-top: 0px; 
    height: 100%; 

}

引導程序不變。一旦我進入移動模式，「col-md-12冬季」之間就會出現一個空格 - Divs。有人有想法嗎？所有其他類不能產生效果，它們只會改變文本顏色或對齊方式。

問候

來源

2015-09-28 Dyon

你可以發佈一個jsfidle來展示你的意思嗎？ –

@KhanhTO，有兩個col-md-12沒什麼問題，因爲它們只是垂直堆疊。但是，您絕不應該只定義中等視口寬度。如果全部都是全角，你應該使用col-xs-12，並且它會放大。否則，您可以合併不同視口的寬度：col-xm-12 col-md-6。 –

問題是H3標籤，其默認的上邊距，嘗試下面

.winter { 
 
    background-color: #c8e2d2; 
 
    text-align: center; 
 
    margin-bottom: 0px; 
 
    margin-top: 0px; 
 
    height: 100%; 
 

 
} 
 
.winter h3 { 
 
    margin:0; 
 
}

<div class="container-fluid"> 
 
    <div class="col-md-12 winter" style="padding-top: 120px;"> 
 
     <h1>Hallo</h1> 
 
     <div class="col-md-6"> 
 
      <h3>Überschrift</h3> 
 
      <p class="justifyText">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p> 
 
     </div> 
 
     <div class="col-md-6"> 
 
      <h3>Überschrift</h3> 
 
      <p class="justifyText">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p> 
 
     </div> 
 
    </div> 
 
     <div class="col-md-12 winter centerText whiteText"> 
 
      <h3>Teil 2</h3> 
 
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p> 
 
     </div> 
 
    </div>

結帳這個小提琴以及之前http://jsfiddle.net/mcn0o6qy

http://jsfiddle.net/a4zsauqh/後

來源

2015-09-28 12:46:42

訣竅，真棒謝謝！ – Dyon

使用Bootstrap的神祕空白

回答

相關問題