如何通过引导网格将googlemapdiv与联系人表单连接起来

Question

大家好，我试图在我的联系人表格旁边放置一个谷歌地图div，但由于网格的放置，我有点迷路了。

<div class="container">
<div class="row">
<div class="col-xl-6 offset-xl-2 py-5">
<form id="contact-form" method="post" action=".." role="form">
<div class="controls">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="form_name">Firstname *</label>
<input id="form_name" type="text" name="name" class="form-control" placeholder="Please enter your firstname *" required="required" data-error="Firstname is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="form_lastname">Lastname *</label>
<input id="form_lastname" type="text" name="surname" class="form-control" placeholder="Please enter your lastname *" required="required" data-error="Lastname is required.">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">

<div class="col-md-6">
<div class="form-group">
<label for="form_email">Email *</label>
<input id="form_email" type="email" name="email" class="form-control" placeholder="Please enter your email *" required="required" data-error="Valid email is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="form_need">Please specify your need </label>
<select id="form_need" name="need" class="form-control" required="required" data-error="Please specify your need.">
<option value=""></option>
<option value="1">...</option>
<option value="2">...</option>
<option value="3">...</option>
<option value="Other">Other</option>
</select>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">

<div class="col-md-12">

<div class="form-group">
<label for="form_message">Message *</label>
<textarea id="form_message" name="message" class="form-control" placeholder="Message for me *" rows="4" required="required" data-error="Please, leave us a message."></textarea>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-12">
<input type="submit" class="btn btn-success btn-send" value="Send message">
</div>
</div>

</form>
</div>
</div>
<!-- row-->
</div>
<!-- container-->

这是我在网上找到的一个地图脚本。

<div id="googleMap" style="width:400px;height:400px;"></div>
<script>
function myMap() {
var mapProp= {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>

现在我明白了，我需要把它放在表格左边的另一个网格里，但我的脑子被炸了。这是我第一次使用网格，花了很长时间才完成。有人想帮我吗？？基本上，我希望左边有地图，右边有联系表格。

Answer 1

如果你想把它们放在一行中，你应该把它们都封装在同一个row类下，并指定在这种特殊情况下它们应该填充多少空间。我只给它们两个col-6，在bootstrap 4和上面，这个类的每个项都将占据0px的一半行空间。此外，如果你想让它做出响应，你需要避免给你的地图元素手册width，为了显示它，你只需要指定它的高度。它可以是100%而不是精确的高度来填充可用空间。

.row {
margin: 0;
padding: 0;
}
#googleMap {
height: 100%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-6 py-5">
<form id="contact-form" method="post" action=".." role="form">
<div class="controls">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="form_name">Firstname *</label>
<input id="form_name" type="text" name="name" class="form-control" placeholder="Please enter your firstname *" required="required" data-error="Firstname is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="form_lastname">Lastname *</label>
<input id="form_lastname" type="text" name="surname" class="form-control" placeholder="Please enter your lastname *" required="required" data-error="Lastname is required.">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="form_email">Email *</label>
<input id="form_email" type="email" name="email" class="form-control" placeholder="Please enter your email *" required="required" data-error="Valid email is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="form_need">Please specify your need </label>
<select id="form_need" name="need" class="form-control" required="required" data-error="Please specify your need.">
<option value=""></option>
<option value="1">...</option>
<option value="2">...</option>
<option value="3">...</option>
<option value="Other">Other</option>
</select>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="form_message">Message *</label>
<textarea id="form_message" name="message" class="form-control" placeholder="Message for me *" rows="4" required="required" data-error="Please, leave us a message."></textarea>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-12">
<input type="submit" class="btn btn-success btn-send" value="Send message">
</div>
</div>
</div>
</form>
</div>
<div class="col-6 py-5">
<div id="googleMap"></div>
<script>
function myMap() {
var mapProp = {
center: new google.maps.LatLng(51.508742, -0.120850),
zoom: 5,
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>
</div>
</div>
<!-- row-->
</div>
<!-- container-->