Bootstrap行图宽度最大化
Bootstrap行图宽度最大化
提问于 2019-06-27 07:23:01
我正在寻找一种方法来最大化Bootstrap行中的映射。在下面的语法中，左边的col-md-9 div是地图，右边是一个固定的240px宽的图像。
<div class="row">
<div class="col-md-9">
<div id="mapid" style="width: 100%; height: 400px;"></div>
</div>
<div class="col-md-3">
<p id="delta">
<%= @myimage %>
<br>
</p>
</div>
</div>使用流畅的布局，它很快就会变得丑陋。有没有办法在流畅的布局中最大化地图？我希望地图增加与流动性和图像保留240px与一个小的边缘。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-06-27 07:34:49
你可以只用flexbox来做这件事，Bootstrap中有一些你可以使用的实用程序：https://getbootstrap.com/docs/4.3/utilities/flex/
<div class="d-md-flex flex-md-row flex-md-nowrap align-items-md-start">
<!-- map -->
<iframe />
<!-- image -->
<img />
</div>由于map/iframe设置为100%宽度，通常这会将另一项推出行。但对于flexbox，默认情况下，Flexbox子对象的flex-shrink: 1;处于打开状态。这意味着它会为你收缩。这就是如何获得地图的宽度最大化。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56782083
复制相关文章
相似问题