自举行映射宽度最大化

Question

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

Answer 1

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