文章/答案/技术大牛

发布

社区首页 >问答首页 >为什么Bootstrap不应用6:3:3的列比例？

问为什么Bootstrap不应用6:3:3的列比例？
EN

Stack Overflow用户

提问于 2021-10-25 07:25:20

回答 3查看 69关注 0票数 0

我将此设置放在一个部分中，但是Bootstrap将第3列拆分为一个新行，为什么？

<div class="row mt-3">
    <div class="col-lg-6" id="landscapePreviewColumn">
        <img id="landingImageLandscape" src="https://pic.speechifai.tech/1000x1000/F8619E40-A392-4FE1-99BC-8FCCDF81BFA7.jpg">
        <img id="landingImageLandscapeOverlay" src="/img/landing_preview/Desktop2.png">
    </div>
    <div class="col-lg-3 pl-3" id="portraitPreviewColumn" style="padding-left:0">
        <img id="landingImagePortrait" src="https://pic.speechifai.tech/57F7B4C0-9A38-4184-874B-707E97EA3977.jpg">
        <img id="landingImagePortraitOverlay" src="/img/landing_preview/Mobile2.png">
    </div>
    <div class="col-lg-3 pl-3" id="socialPreviewColumn" style="padding-left:0">
        <img id="landingImageSocial" src="https://pic.speechifai.tech/2FF280BE-DCB3-4235-9B2C-87558D4D26F1.jpg">
        <img id="landingImageSocialOverlay" src="/img/landing_preview/Mobile2.png">
    </div>
</div>

看起来像这样：

我去掉了左边的填充，但有同样的现象。

<div class="row mt-3">
    <div class="col-lg-6" id="landscapePreviewColumn">
        <img id="landingImageLandscape" src="https://pic.speechifai.tech/1000x1000/F8619E40-A392-4FE1-99BC-8FCCDF81BFA7.jpg">
        <img id="landingImageLandscapeOverlay" src="/img/landing_preview/Desktop2.png">
    </div>
    <div class="col-lg-3" id="portraitPreviewColumn">
        <img id="landingImagePortrait" src="https://pic.speechifai.tech/57F7B4C0-9A38-4184-874B-707E97EA3977.jpg">
        <img id="landingImagePortraitOverlay" src="/img/landing_preview/Mobile2.png">
    </div>
    <div class="col-lg-3" id="socialPreviewColumn">
        <img id="landingImageSocial" src="https://pic.speechifai.tech/2FF280BE-DCB3-4235-9B2C-87558D4D26F1.jpg">
        <img id="landingImageSocialOverlay" src="/img/landing_preview/Mobile2.png">
    </div>
</div>

html

css

bootstrap-4

回答 3

Stack Overflow用户

发布于 2021-10-25 07:43:22

尝试添加

class="img-fluid"

到图像上。文档中写道：

响应图像引导程序中的图像使用.img-fluid进行响应。将max-width: 100%;和height: auto;应用于图像，使其与父元素一起缩放。

来源：https://getbootstrap.com/docs/4.0/content/images/

票数 1

Stack Overflow用户

发布于 2021-10-25 07:46:07

我想，你的屏幕太小了

https://getbootstrap.com/docs/4.6/layout/grid/#grid-options

试用col-6 col-3

票数 0

Stack Overflow用户

发布于 2021-10-25 11:31:56

问题是父容器有填充。我将其设置为零，然后所有3个项目都排成一行。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69704180

复制

相似问题

问为什么Bootstrap不应用6:3:3的列比例？
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么Bootstrap不应用6:3:3的列比例？EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么Bootstrap不应用6:3:3的列比例？
EN