Question

除垂直平板电脑浏览器外，看起来不错。红色和蓝色div之间的空白出现，由黑色div的高度强制。

在解决方案中，平板电脑/移动屏幕上的div的堆叠顺序变为蓝色也是至关重要的。黑＆gt;红色。

            <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/

Answer 1

红色File.WriteAllBytes()的{{1}}将被黑色row的高度向下推。

在同一div div中的蓝色div下方添加红色div。

Answer 2

如果您将所有col-sm-#更改为col-md-#，那么它会占据图像底部和红色div的空白区域，但是这两个空格之间仍然有空白区域文本。

尝试一起玩，看看你能不能得到你想要的东西！

Answer 3

我能做的最好：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%}

很抱歉，如果我删除了您需要的容器，请尝试清理代码以明确答案。如果您反对内联样式，那么内联浮点数可以整理成一个类。

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

3 个答案: