Question

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

在桌面上的外观如下： [IMG]http://i65.tinypic.com/2eby5bs.png[/IMG]

HTML：

@bot.command(pass_context=True)
@commands.has_permissions(administrator=True)
async def clean(ctx, limit: int):
        await ctx.channel.purge(limit=limit)
        await ctx.send('Cleared by {}'.format(ctx.author.mention))
        await ctx.message.delete()

@clean.error
async def clear_error(ctx, error):
    if isinstance(error, commands.MissingPermissions):
        await ctx.send("You cant do that!")

CSS：

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

}

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

Answer 1

您肯定会在以后的问题中包括一些样式，以便我们诊断冲突。为将来提供参考，请为您分配的类添加任何样式。

据我只能从您的代码和屏幕截图中得知，我会说在媒体查询中为受影响的断点设置2个div上的margin: 0;是可以的，但我也想添加一个建议，使您使用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>

您也可以在此CSS-Tricks article中进一步了解flexbox。如果您对此处的任何内容感到困惑，请随时发表评论，我会尽力而为。我也composed a fiddle here，所以您可以看到它在调整大小时的响应。

在移动设备大小上，为什么引导网格中的行之间没有空间？

1 个答案: