如何消除不同类 = 行（引导程序）中两个 div 之间的空格？

Posted 2023-03-06

技术标签:

【中文标题】如何消除不同类 = 行（引导程序）中两个 div 之间的空格？【英文标题】：How to eliminate whitespace between two divs in different class=row's (Bootstrap)? 【发布时间】：2015-08-19 04:48:37 【问题描述】：

看起来不错，除了在垂直平板电脑浏览器上。由黑色 div 的高度强制显示红色和蓝色 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/

【问题讨论】：

您期待什么？每行都以结尾，因此 div 会随着每行添加而向下移动。 【参考方案1】：

尽我所能：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%

抱歉，如果我删除了您需要的容器，请尝试清理代码以使答案清晰。如果您不喜欢内联样式，可以将该内联浮点数整理到一个类中。

【讨论】：

【参考方案2】：

如果您将所有col-sm-# 更改为col-md-#，则它会将空白区域从图像底部和红色 div 中移开，但在这 2 和充满文本的黑色 div 之间仍然存在空白。

试着和他们一起玩，看看你能不能得到你想要的！

【讨论】：

【参考方案3】：

带有红色div 的row 将被黑色div 的高度向下推。

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

【讨论】：

不能。平板电脑/手机屏幕上 div 的堆叠顺序为蓝色 > 黑色 > 红色，这一点至关重要。你的方式会导致蓝色>红色>黑色。

以上是关于如何消除不同类 = 行（引导程序）中两个 div 之间的空格？的主要内容，如果未能解决你的问题，请参考以下文章