禁用 class="img-responsive" 时,引导列重叠

Posted

技术标签:

【中文标题】禁用 class="img-responsive" 时,引导列重叠【英文标题】:When disabling class="img-responsive", bootstrap columns overlaps 【发布时间】:2017-11-21 22:01:34 【问题描述】:

我是 Bootstrap 的新手,最近在做一个 Angular2 项目,有一个问题要问。

目前我有一个地图组件左侧占据 3 列,但是每次我调整/缩小浏览器时,图像也会调整/缩小。但我希望每当用户调整浏览器大小时图像保持固定大小。所以我删除了img标签中的class="img-responsive"。但是当我缩小浏览器时,这两个组件最终重叠了。我想知道为什么,谁能帮帮我。

对于基础应用组件:

<div class="row ">
    <div class="col-md-3">
        <legend-component class="legend-component"></legend-component>
        <map-component></map-component>
    </div>

    <div class="col-md-9">
        <sidebar-component></sidebar-component>
        <table-component></table-component>
    </div>
</div>

对于地图组件,我有相应的地图模板来渲染我的图像:

<div align="center" >
    <div class="row" id="images">
        <div class="col-sm-12">
            <img  class="img-responsive" [src]=getImageSource() />
        </div>
    </div>
</div>

对于普通的全屏浏览器:

禁用前缩小浏览器 class="img-responsive":

禁用class="img-responsive"后缩小浏览器:

【问题讨论】:

要在流体列旁边有一个固定宽度的列,您必须使用 display:table/display:table-cell 或使用 flex 样式。弹性:***.com/questions/23794713/…,表:***.com/a/28932886/8085668 你想要的是一个固定宽度的列,我想。所以你不应该对左列使用 col-md-3,而是在样式中写上适当的宽度。对于右侧,您可以使用类似“宽度:计算(100% - 400px)”(400 是左侧列宽度) 【参考方案1】:

给图片一个最大宽度。 img-responsive 主要是改变图片的宽度。

【讨论】:

【参考方案2】:

如果您希望图像保持一定大小,我建议为图像定义一个固定的宽度/高度。 img-responsive 将图像大小调整为其容器宽度的大小。

【讨论】:

以上是关于禁用 class="img-responsive" 时,引导列重叠的主要内容,如果未能解决你的问题,请参考以下文章

Android如何禁用触碰事件?

根据选择禁用jQuery Date Picker中的日期

jquery怎样实现点击按钮切换div

火狐浏览器input被禁用后怎么触发点击事件

如何使用 jQuery 删除“禁用”属性?

教用jQuery给按钮添加disabled属性,该按钮禁用后,点击该按钮仍可以触发事件!求大神帮忙! 急,在线等!