css - 带有 Bootstrap 的响应式设计

Question

我正在尝试创建一个顶部有两个按钮并且应该居中的响应式页面。在按钮下，我添加了一个谷歌地图，它应该覆盖页面的其余部分。当我尝试下面的代码时，按钮没有居中并且也没有响应。不知何故， map 高度比页面长，所以滚动条出现了。我哪里做错了？

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

Answer 1

两部分问题/答案:

1. .center-block类只设置 margin-right: auto; margin-left: auto;因此，假设宽度已知，浏览器会将“ block ”渲染为居中。适用于 <img width="标签，但未定义宽度 <div>宽度未知，因此大多数浏览器会忽略 margin:auto .有两种方法可以解决此问题:

   一个。创建一个固定宽度的内部 div，即 <div style="width:200px">..buttons..</div>

   (HTML5 支持者会对此退缩，但是...) <center>标记在 HTML5 中已被弃用，但在我所知道的所有浏览器中仍然有效。例如<center>..buttons..</center> - 如果它有效，那为什么不呢。

2. 很难回答，因为有几件事会导致不当行为，而且我不知道(根据您的示例)您试图产生什么效果:

   一个。 .map_canvas{ height:100%; width:100%; } - 不确定为什么？具有百分比的宽度和高度使用祖先对象指标，因此 w=100% 将使用视口(viewport)的完整宽度(预期)而 h=100% 将使用视口(viewport)的完整高度，这意味着 map 容器及其上方的容器+按钮的总组合高度。

   .map_container{ height:0; } - 不确定为什么？永远不应该有任何理由 - display:none或 height: auto|length|initial|inherit .

   .map_container{ position:relative; } -> .map_canvas{ position:absolute; } ？？？不确定你在那里做什么？看看#21022512有这个 Fiddle --- 如果是这样，请记得给它投赞成票。

PS:尝试一次问一个问题 - 一些 StackExchange 用户可能知道一个问题的答案而不是另一个问题，然后他们可能根本不回答。并且..，使用 jsfiddle.com 创建您的问题的复制品。在问题中发布指向它的链接。