響應式設計與引導

我試圖有一個響應式頁面，其上有兩個按鈕，應該居中。在按鈕下方，我添加了一個Google地圖，該地圖應該覆蓋頁面的其餘部分。當我嘗試下面的代碼時，按鈕不居中，也不響應。不知何故地圖高度比頁面顯示的長度更長。和我在做錯的想法？響應式設計與引導

<div class="container"> 
      <div class="row"> 
       <div class="col-md-4 center-block"> 
        <button >click me</button> 
        <button >click me</button> 
       </div> 
      </div> 
      </div> 

     <div class="map_container"> 
      <div id="googleMap" class="map_canvas"></div> 
     </div>

CSS

.map_container{ 

    overflow:hidden; 
    padding-bottom:56.25%; 
    position:relative; 
    height:0; 
} 
.map_container .map_canvas{ 

    left:0; 
    top:0; 
    height:100%; 
    width:100%; 
    position:absolute; 
}

來源

2016-04-21 Akin Dönmez

給'padding'一個百分比使用父寬度的百分比，而不是高度。這是'padding'的怪癖。 – 4castle

你能提起小提琴嗎？ – GeckoTang

檢查JKillian關於[Container-fluid vs .container]的回答（http://stackoverflow.com/a/22263969/1151408）。爲什麼不把地圖放在容器內？ – Yuri

兩個部分的問題/答案：

的.center-block類只設置margin-right: auto; margin-left: auto;因此，瀏覽器將呈現「塊」爲中心的假設寬度是知道。 <img width="標籤可以很好地工作，但未定義寬度的<div>不是一個寬度，所以大多數瀏覽器都忽略了margin:auto。有兩種方法可以解決這個問題：

a。創建一個固定寬度的innner div，即<div style="width:200px">..buttons..</div>

b。 （HTML5支持者會在這一點上，但...）<center>標記在HTML5中被棄用，但仍然適用於我所知道的所有瀏覽器。例如<center>..buttons..</center> - 所以如果它的工作，那麼爲什麼不。
更難回答的問題，因爲有幾件事情，會導致異常行爲，我不知道（從你的例子）你想產生什麼樣的影響：

一個。 .map_canvas{ height:100%; width:100%; } - 不知道爲什麼？寬度和高度百分比使用祖先對象度量，因此w = 100％將使用視口的全部寬度（預期），h = 100％將使用視口的全部高度，這意味着視口的總高度地圖容器和它上面的容器+按鈕。

b。 .map_container{ height:0; } - 不知道爲什麼？不應該有任何原因 - display:none或height: auto|length|initial|inherit。

c。 .map_container{ position:relative; } - >.map_canvas{ position:absolute; } ???不確定你在那裏做什麼？看看#21022512有這個Fiddle ---如果這是它然後記得投票。

PS：試着問一個問題，在一個時間 - 一些StackExchange用戶可能知道答案的一個，而不是其他，然後他們可能只是不應答。然後，使用jsfiddle.com創建您的問題的複製。該帖子中的問題鏈接。

來源

2016-04-22 03:39:12 Vino

你可以實現這個純粹使用Bootstrap類和很少的HTML重組。請致電jsfiddle。

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-md-12 text-center"> 
     <button class="btn btn-primary" >click me</button> 
     <button class="btn btn-info" >click me</button> 
    </div> 
    </div> 

    <div class="map_container"> 
    <div id="googleMap" class="map_canvas"></div> 
    <script> 
     function initMap() { 
     var mapDiv = document.getElementById('googleMap'); 
     var map = new google.maps.Map(mapDiv, { 
      center: {lat: 44.540, lng: -78.546}, 
      zoom: 8 
     }); 
     } 
    </script> 
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap" 
     async defer></script> 
    </div> 

</div>

來源

2016-04-22 05:22:08

響應式設計與引導

回答

相關問題