如何在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：你應該只問每個問題一個問題。