如何通过引导网格加入带有联系表格的谷歌地图 div

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在引导程序 4 及更高版本中，该类的每个项目将占据行空间的一半，从 0px 到您可以通过阅读有关引导网格系统 here 的更多信息将其修改为您想要的任何内容。此外，如果您希望它具有响应性，您需要避免提供地图元素手册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-->