Bootstrap和响应式菜单列表和图像

Question

这是我到目前为止所做的： http://clients.emagid.com/practice_work/darwin/index.html

我想要的最终结果是这个网页： http://php1.emagid.net/~laurenbe/

我只是在一个已经完成的网站上做练习。当我调整浏览器大小时，我想让响应式菜单按钮位于中心（0自动），而不像大多数引导程序菜单按钮那样固定在右上角。

此外，我如何制作它，以便当我点击菜单按钮时，菜单列表会按下下面的所有内容，以便它不会留在它下面？ （试试我的网页并查看我的意思，而不是将主体内容与列表一起按下，正文内容与列表重叠）。

最后但并非最不重要的是，当我调整浏览器大小时，如何让我的图像重缩小？ （查看我的网页和完成的网页。）

Answer 1

目前，该按钮向右浮动，因为在bootstrap.min.css的第4300行有规则

.navbar-toggle {
    position: relative;
    float: right;     <==== problem
    padding: 9px 10px;
   ....
} 

一种解决方案是在max-width：767px媒体查询

中添加以下内容

@media (max-width:767px){

   .navbar-toggle {
    float: none;
   }
}  

扩展的移动菜单没有推送主页内容的问题是因为在style.css的第121行你已经修复了标题的高度：

header {
    height: 198px; <== problem
    text-align: center;
    margin: 0 auto;
    max-width: 710px;   
}   

您可以删除此高度规则，也可以在max-width：767px @mendia块中重置它。

要强制缩放图片，可以根据％调整图片大小。例如，如果你做宽度：80％;然后他们将是他们父元素的80％。实际上，这并不总是很容易，因为你需要有多个@media规则，这样图像大小保持适当，当引导网格在窄视口处崩溃时，你不会对它产生奇怪的影响

希望这有帮助！