2015-09-28 124 views
1

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。有人有想法吗? 所有其他类不能产生效果,它们只会改变文本颜色或对齐方式。

问候

+0

你可以发布一个jsfidle来展示你的意思吗? –

+0

@KhanhTO,有两个col-md-12没什么问题,因为它们只是垂直堆叠。但是,您绝不应该只定义中等视口宽度。如果全部都是全角,你应该使用col-xs-12,并且它会放大。否则,您可以合并不同视口的宽度:col-xm-12 col-md-6。 –

回答

3

问题是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/

+0

诀窍,真棒谢谢! – Dyon