Question

我正在尝试制作2列，每个图像中有一个图像，虽然2个图像的大小完全相同，但我注意到它们的右/左边距不均匀，左边的边距略大，我该如何解决？

HTML：

<div class="container">
    <div class="row">
        <div class="col col-lg-6">
            <img src="logo.jpg">
        </div>
        <div class="col col-lg-6">
            <img src="profile.jpg">
        </div>
    </div>
</div>

CSS：

.container img {
    width: 35em;
    height: 35em;
}

Answer 1

这是因为你已经将宽度应用于img标签。您可以通过将宽度设置为100％来解决此问题。

当图像尺寸大于div图像溢出的宽度时。包含img标记的div标签有左右填充。如果图像的宽度大于div宽度，图像将溢出。即使你设置溢出到隐藏图像将显示div的innerWidth。

使img宽度为100％会使图像保留在div中。

希望这能解决您的问题。

Answer 2

由于我没有足够的声誉来发表评论，我将回答您在HasithaC答案下面的评论部分中提出的问题。

首先，像HasithaC所说的那样，给你的图像width: 100%，使图像保留在div中。

您在评论中提到，调整大小时图像不会叠加在一起。这是因为您将col与col-lg-6一起插入。 col-lg-6代表“column-large-6”，当屏幕大小为992px或更高时，它将创建6列布局。如果col类首先不在col-lg-6旁边，那么当屏幕尺寸低于992px时，图像（确切的列）将叠加在一起，但{ {1}}类就在那里，因此当屏幕大小低于992px时，它会接管你的div的样式，因为col意味着992px或更高。此外，col-lg-6有一个col。根据{{3}}：

这定义了Flex项目在必要时增长的能力。它接受一个无比的值作为一个比例。它规定了项目应占用的Flex容器内可用空间的大小。如果所有项目的flex-grow都设置为1，则容器中的剩余空间将平均分配给所有子项。

您在同一行中有两个flex-grow: 1，并且它们都有col，因此它们将具有相同的宽度，但它们不会叠加在一起，因为没有媒体控制它的查询，不像flex-grow: 1，仅适用于992px或更高的屏幕尺寸。删除col-lg-6将解决问题。

CSS-Trick

Twitter的Bootstrap，右/左列边距不均匀

2 个答案: