禁用 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" 时,引导列重叠的主要内容,如果未能解决你的问题,请参考以下文章