如何通过 bootstrap 网格加入 google 地图 div 与联系表

Question

大家好，我正在尝试将 google 地图 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 class 下，并指定它们应该填充多少 space在这个特殊情况下，我只给了他们两个 col-6，在 bootstrap 4 和上面的每个带有 class 的项目将占据 0px 行 space 的一半通过阅读更多关于 bootstrap 网格系统 here 的信息，您可以将其修改为您想要的任何内容。此外，如果您希望它具有响应性，则需要避免提供地图元素手册 width，为了显示它，您只需要指定其高度。它可以是 100% 而不是精确的高度来填充可用的 space.

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

如何通过 bootstrap 网格加入 google 地图 div 与联系表

How to join a google map div with a contact form through bootstrap grid

html

css

grid

bootstrap-4