禁用 class="img-responsive" 时，引导列重叠答案

【问题标题】：When disabling class="img-responsive", bootstrap columns overlaps禁用 class="img-responsive" 时，引导列重叠
【发布时间】：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() height="90%"/>
        </div>
    </div>
</div>

对于普通的全屏浏览器：

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

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

【问题讨论】：

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

标签： html css twitter-bootstrap angular angular-ui-bootstrap

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：