时间戳

首页 > 解决方案 > 为什么移动尺寸的引导网格中的行之间有空格？

html - 为什么移动尺寸的引导网格中的行之间有空格？

问题描述

我想知道为什么我在第一行的第二个文本和第二行的第一个文本之间有空格？我觉得很烦，为什么会这样？有什么办法可以解决吗？ [IMG]http://i67.tinypic.com/2zhe0xg.jpg[/IMG]

这是它在桌面上的样子： [IMG]http://i65.tinypic.com/2eby5bs.png[/IMG]

HTML：

<div class="container-fluid">
        <div class="row mt-5 mb-5 ml-3 mr-3">
            <div class="col-lg-6 col-md-6 col-sm-6">
                <div class="row">
                    <div class="col-lg-8 col-md-8 col-sm-8">
                        <img class="img-fluid img-thumbnail" src="https://static-assets-prod.epicgames.com/fortnite/static/webpack/8704d4d5ffd1c315ac8e2c805a585764.jpg">
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-4text">
                    <div class="b">
                        <p>Somethin ggoes here maybe</p>
                    </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6">
                <div class="row">
                    <div class="col-lg-8 col-md-8 col-sm-8">
                        <img class="img-fluid img-thumbnail" src="https://static-assets-prod.epicgames.com/fortnite/static/webpack/8704d4d5ffd1c315ac8e2c805a585764.jpg">
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-4 text">
                        <div class="b">
                            <p>Something goes here maybe</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-5 mb-5 ml-3 mr-3">
                <div class="col-lg-6 col-md-6 col-sm-6">
                    <div class="row">
                        <div class="col-lg-8 col-md-8 col-sm-8">
                            <img class="img-fluid img-thumbnail" src="https://static-assets-prod.epicgames.com/fortnite/static/webpack/8704d4d5ffd1c315ac8e2c805a585764.jpg">
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-4 text">
                        <div class="b">
                            <p>Somethin ggoes here maybe</p>
                        </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-6">
                    <div class="row">
                        <div class="col-lg-8 col-md-8 col-sm-8">
                            <img class="img-fluid img-thumbnail" src="https://static-assets-prod.epicgames.com/fortnite/static/webpack/8704d4d5ffd1c315ac8e2c805a585764.jpg">
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-4 text">
                            <div class="b">
                                <p>Something goes here maybe</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


    </div>

CSS：

.row > .text > .b {
display: -webkit-box;
height: 70%;
line-height: 1.3;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;

}

我尝试了多种解决方案，但无法使其正常工作

标签： htmlcss

解决方案

您绝对应该在未来的问题中包含一些样式，以便我们可以诊断冲突。为将来参考，包括您分配的类的任何样式。

不过，就我从您的代码和屏幕截图中可以看出的而言，我想说margin: 0;在媒体查询中为受影响的断点设置您的 2 个 div 是可行的，但我还想添加一个建议，这将是使用flexbox.

/* Make your container a flexbox */

.container {
  display: flex;
}

/* Give flex grow value of 1 to keep all inner containers equal size */

.article {
  flex: 1;
  margin: 5px;
}

/* Sizing the image */

.article>img {
  max-width: 400px;
}

.article>h1 {
  font-size: 12px;
}

/* You could also just set the flex-direction to column, but displaying as block at the breakpoint will achieve the layout you're looking for on mobile. 500px is a trivial guess, use inspector to find the sweet spot */

@media (max-width:500px) {
  .container {
    display: block;
  }
}
<div class="container">
  <div class="article">
    <img src="https://3bonlp1aiidtbao4s10xacvn-wpengine.netdna-ssl.com/wp-content/uploads/2018/05/epic-fortnite.jpg" />
    <h1>
      Something here maybe.
    </h1>
  </div>
  <div class="article">

    <img src="https://3bonlp1aiidtbao4s10xacvn-wpengine.netdna-ssl.com/wp-content/uploads/2018/05/epic-fortnite.jpg" />
    <h1>
      Something here maybe.
    </h1>
  </div>
</div>
<div class="container">
  <div class="article">

    <img src="https://3bonlp1aiidtbao4s10xacvn-wpengine.netdna-ssl.com/wp-content/uploads/2018/05/epic-fortnite.jpg" />
    <h1>
      Something here maybe.
    </h1>
  </div>
  <div class="article">

    <img src="https://3bonlp1aiidtbao4s10xacvn-wpengine.netdna-ssl.com/wp-content/uploads/2018/05/epic-fortnite.jpg" />
    <h1>
      Something here maybe.
    </h1>
  </div>
</div>

flexbox你也可以在这篇CSS-Tricks 文章中阅读更多内容。如果您对这里的任何内容感到困惑，请随时发表评论，我会尽力回答。我在这里也写了一个小提琴，所以你可以看到它在调整大小时是如何响应的。

推荐阅读