如何在Bootstrap中修复元素？

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

我有两个问题：

1. 为什么我设置<div id="map-container">到col-md-4但它没有显示？

2. 我的网站必须响应，但我必须在top: 800px更改此元素可以出现之前创建空白到另一个元素。

我想让它显示是这样的：

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

Answer 1

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

这将是引导符合结构为您的情况：

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

你的地图doesen't显示了，因为你没有加载谷歌地图的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：你应该只问每个问题一个问题。