получить кнопку для ответа по размеру на отзывчивый div

Question

У меня есть карта Google в отзывчивом div, так что размер карты меняется в зависимости от размера экрана, который работает отлично. У меня также есть кнопка над картой. Мне нужно, чтобы эта кнопка всегда была одинаковой ширины карты, возможно ли это?

Мой столбец:

<div class="col-lg-6">
    <br />

    <p>
        <button style="width:60vh" formtarget="_blank"
            onclick="window.open('https://www.google.com/maps/search/?api=1&query=@Model.OfficialSchoolName+@Model.Address1+@Model.County+@Model.Eircode')"
            type="button" class="btn btn-primary">
            <span class="glyphicon glyphicon-road" aria-hidden="true"></span>
            Get Directions
        </button>
    </p>
    <div class="embed-responsive embed-responsive-16by9">

        <div id="map" class="embed-responsive-item"
            style="border: 1px solid black;"></div>
    </div>
</div>

Как она выглядит в настоящее время в полноэкранном режиме (идеально):

Как это выглядит в настоящее время при небольшом размере экрана (кнопка слишком большая):

Answer 1

Сложно тиражировать, не имея вашего API-ключа Google Maps, однако я бы попытался поместить карту и кнопку в один и тот же контейнер div, указав ширину кнопки и div карты в том же процентном соотношении

<div class="container">
      <div class="button">
        <!-- button here -->
      </div>
      <div class="map">
        <!-- map here -->
      </div>
    </div>

.button {
  width: 100%;
}
.map {
  width: 100%;
}

Затем вам нужно будет установить свойство вашей кнопки и отобразить ширину 100%, так как они оба будут находиться в своих собственных контейнерах.

рабочий пример можно найти здесь https://codesandbox.io/s/awesome-dust-7hkpz

Answer 2

Сначала: пожалуйста, не используйте кнопку, когда ее назначение совпадает со ссылкой / якорем. Поэтому, пожалуйста, используйте элемент <a href="…"> и стилизуйте его как кнопку.

Решение вашей проблемы - использовать относительные размеры, которые не зависят от размера экрана. Вы можете использовать следующее решение:

<p>
    <a style="width:100%" href="https://www.google.com/maps/search/?api=1&query=@Model.OfficialSchoolName+@Model.Address1+@Model.County+@Model.Eircode"
            class="btn btn-primary">
        <span class="glyphicon glyphicon-road" aria-hidden="true"></span>
        Get Directions
    </a>
</p>