Question

我创建了两列col-md-8和col-md-4，col-md-4包含我的地图。

但是当我尝试将地图修改为col-md-4时，我遇到了问题。

function init_map() {
var var_location = new google.maps.LatLng(45.430817, 12.331516);

var var_mapoptions = {
    center: var_location,
    zoom: 14
};

var var_marker = new google.maps.Marker({
    position: var_location,
    map: var_map,
    title: "Venice"
});

var var_map = new google.maps.Map(document.getElementById("map-container"),
    var_mapoptions);

var_marker.setMap(var_map);

}

google.maps.event.addDomListener(window, 'load', init_map);

.contact {
  position: absolute;
  color: rgb(255, 255, 255);
  background-color: rgb(0, 0, 0);
  top: 800px;
  padding: 0 0px 0 0px;
  margin: 0;
  left: 0%;
}

#map-container { height: 50px }

.service-container {
    background: url('http://images.indianexpress.com/2016/05/love-autumn-tree_759_thinkstockphotos-177812216.jpg');
    height:1000px;
    width: 1000px;
}

.layer {
    background-color: rgba(0, 179, 0, 0.6);
    width: 100%;
    height: 100%;
}

<div class="service-container">
   <div class="layer">
      <div class="contact-maps">
         <div class="col-md-8 contact">
            <div class="col-md-6">
               <div class="col-md-6"></div>
               <div class="col-md-6">
                  <h1>CONTACT</h1>
                  <h3>CENTRAL OFFICE</h3>
                  <p>
                     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae laborum cum consequuntur assumenda itaque error dolore, molestiae illo fugiat. Illo praesentium ut mollitia dolorem quis vero quisquam culpa, voluptas eos.
                  </p>
               </div>
            </div>
            <!-- /.col-md-6 -->
            <div class="col-md-6">
            </div>
         </div>
         <!-- /.col-md-8 contact -->
         <div class="col-md-4">
            <div id="map-container"></div>
         </div>
         <!-- /.col-md-4 -->
      </div>
      <!-- /contact-maps -->
   </div>
   <!-- / .layer -->
</div>
<!-- service-container -->

我有两个问题：

为什么我将<div id="map-container">设置为col-md-4但未显示？
我的网站必须具有响应性，但我必须在top: 800px之前更改为此元素出现之前创建空白到另一个元素。

我希望它显示如下：

http://i.imgur.com/rM95p0q.png

Answer 1

关于你的第一个问题：首先，您必须正确使用Bootstrap网格系统。 BS列必须始终嵌套在行中（BS grid tutorial）。

这将是适合您案例的Bootstrap一致结构：

<div class="container">
  <div class="row">
    <div class="col-md-8 contact">
      <div class="row">
        <div class="col-md-6">
          <div class="row">
            <div class="col-md-6"></div>
            <div class="col-md-6">
            </div>
          </div>
        </div>
        <div class="col-md-6">
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div id="map-container"></div>
    </div>
  </div>
</div>

您的地图会显示，因为您尚未加载Google Maps JavaScript API。

使用以下代码执行此操作：

 <script async defer
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
 </script>

如果你到目前为止，你必须request an API key。

PS：每个问题你应该只问一个问题。

如何修复Bootstrap中的元素？

1 个答案: