Строка начальной загрузки Максимизация ширины карты

Question

Я ищу способ максимизировать карту внутри строки Bootstrap. В следующем синтаксисе левый col-md-9 div - это карта, а правая сторона - фиксированное изображение шириной 240 пикселей.

<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>

С изменчивым расположением, это может быстро стать ужасным. Есть ли способ максимизировать карту в жидком макете? Я хочу, чтобы карта увеличивалась с текучестью, а изображение сохраняло 240 пикселей с небольшим запасом.

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/