javascript - 获取一个按钮来响应响应式 div 的大小

Question

我在响应式 div 中有一个 Google map ，因此 map 可以根据屏幕尺寸改变大小，效果非常好。我在 map 上方还有一个按钮。我需要这个按钮始终与 map 的宽度相同，这可能吗？

我的专栏:

<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

首先:当按钮的用途与链接/ anchor 相同时，请不要使用按钮。所以请使用<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>