ブートストラップで要素を固定する方法は？

Question

col-md-8とcol-md-4の2つの列を作成し、col-md-4にはmy mapsが含まれています。

しかし、固定地図を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 -->

私は2つの質問している：

1. なぜ私はcol-md-4に<div id="map-container">を設定しましたが、それは表示されませんか？

2. 私のウェブサイトは応答する必要がありますが、top: 800pxでこの要素を表示する前に別の要素に空白を作成する必要があります。

私はそれがこのように表示する：

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

Answer 1

あなたの最初の質問について：すべての まず、あなたが適切にブートストラップグリッドシステムを使用する必要があります。 BS列は常に行内にネストする必要があります（BS grid tutorial）。

これは、ブートストラップは、あなたのケースのための構造に準拠し、次のようになります。あなたがGoogleマップのJavaScript APIをロードしていないので、

<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。あなたがこれまで持っていない場合は

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

あなたはrequest an API keyに持っている：

は、次のコードを使用していることを実行します。

PS：質問ごとに1つの質問のみをお願いします。