css - 自举行映射宽度最大化

我正在寻找一种最大化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的小间距。

最佳答案

您可以使用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>

由于地图/ iframe设置为100％宽度，因此通常这会将其他项目推出该行。但是对于flexbox，默认情况下，flexbox子级会打开flex-shrink: 1;。这意味着它将为您缩小。这样便可以获取地图的宽度最大化。



演示：https://jsfiddle.net/davidliang2008/x56ao2pz/8/

关于css - 自举行映射宽度最大化，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56782083/