如何消除不同class = row（Bootstrap）中两个div之间的空格？

除了垂直平板电脑浏览器外，看起来不错。红色和蓝色div之间的空白出现，被黑色div的高度所强制。如何消除不同class = row（Bootstrap）中两个div之间的空格？

在解决方案中，平板电脑/手机屏幕上div的堆叠顺序变为蓝色>黑色>红色也很关键。

  <html> 
      <div class="container"> 
      <div class="row"> 
      <div class="col-sm-7"><div class="blue"><img src="jpg"> Lots of whitespace appears below between 768 to aprx 900 px browser width (tablet dimenions)</div></div> 
      <div class="col-sm-5"><div class="black">Line of text<br>Line of text<br>Line of text<br>Line of text<br>Line of text<br>Line of text<br>Line of text<br>Line of text<br>Line of text<br>Line of text<br>Line of text<br>Line of text<br>Line of text<br>Line of text<br>Line of text<br>Line of text<br>Line of text<br>Line of text<br>Line of text</div> 
      </div> 
      </div> 
      </div>  
      <div class="container"> 
      <div class="row"> 
      <div class="col-sm-7"><div class="red">Red</div></div> 
      <div class="col-sm-5"><div> 
      </div> 
      </div> 
      </html>

https://jsfiddle.net/g7xg0uc7/1/

来源

2015-06-04 Jake

你期望什么？每行以
结尾，因此div将随着每行添加而向下移动。 – Grumpy

的row红色div将黑div高度可以下推。

在同一个col-sm-7 div中，在蓝色div下方添加红色div。

来源

2015-06-04 14:20:48

不能。关键在于平板电脑/手机屏幕上的div的堆叠顺序变为蓝色>黑色>红色。你的方式会导致蓝色>红色>黑色。 – Jake

如果您将所有col-sm-#更改为col-md-#，则它会将图像底部和红色div的空白分开，但这两个黑色div与文本之间仍有空白。

尝试与那些玩，看看你是否能得到你想要的东西！

来源

2015-06-04 14:24:44 A3mercury

尽我所能做到：https://jsfiddle.net/g7xg0uc7/12/

HTML：

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-7"> 
      <div class="blue"> 
       <img src="https://wiki.creativecommons.org/images/9/97/8256206923_c77e85319e_n.jpg" /> Lots of whitespace appears below between 768 to aprx 900 px browser width (tablet dimenions) 
      </div> 
     </div> 
     <div class="col-xs-12 col-sm-5" style="float: right;"> 
      <div class="black"> 
       Line of text<br/>Line of text<br/>Line of text<br/>Line of text<br/>Line of text<br/>Line of text<br/>Line of text<br/>Line of text<br/>Line of text<br/>Line of text<br/>Line of text<br/>Line of text<br/>Line of text<br/>Line of text<br/>Line of text<br/>Line of text<br/>Line of text<br/>Line of text<br/>Line of text 
      </div>  
     </div> 
     <div class="col-sm-7"> 
      <div class="red">Red</div> 
     </div> 
    </div> 
    </div>

CSS：

.black {width:100%; color: #fff;background-color: black ; padding:10px; float: right;} 
.red {width:100%; background-color:red; color: #fff; padding:10px; float: left;} 
.blue {width:100%; background-color:blue; color: #fff; padding:10px} 
img {width:100%}

很抱歉，如果我去掉你需要的容器，试图清理代码，以使答案明确。如果你不喜欢内联样式，那么可以将内联float整理到一个类中。

来源

2015-06-04 14:25:35 MikeK

如何消除不同class = row（Bootstrap）中两个div之间的空格？

回答

相关问题