响应式设计与引导

我试图有一个响应式页面，其上有两个按钮，应该居中。在按钮下方，我添加了一个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

响应式设计与引导

回答

相关问题