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

问题描述 投票:0回答:2

我试图制作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;
}
html css twitter-bootstrap
2个回答
0
投票

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

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

您在评论中提到,调整大小时图像不会叠加在一起。这是因为你将colcol-lg-6一起插入。 col-lg-6代表“column-large-6”,当屏幕大小为992px或更高时,它将创建6列布局。如果col类首先不与col-lg-6并列,那么当屏幕大小低于992px时,图像(确切的列)将叠加在一起,但是col类就在那里,所以它将会当屏幕尺寸低于992px时接管你的div的样式,因为col-lg-6是992px或更高。此外,col有一个flex-grow: 1。据CSS-Trick说:

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

你有两个col在同一行,它们都有flex-grow: 1,所以它们将具有相同的宽度,但它们不会叠加在一起,因为没有媒体查询控制它,不像col-lg-6只适用于屏幕尺寸992px或以上。删除col将解决问题。

Jsfiddle example


1
投票

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

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

使img宽度为100%将使图像保留在div中。

希望这能解决你的问题。

© www.soinside.com 2019 - 2024. All rights reserved.