<分区>
这是我目前所拥有的: http://clients.emagid.com/practice_work/darwin/index.html
我想要的最终结果是这个网页: http://php1.emagid.net/~laurenbe/
我只是在一个已经完成的网站上做练习。当我调整浏览器大小时，我想让响应式菜单按钮位于中心(0 自动)，而不是像大多数 Bootstrap 菜单按钮那样固定在右上角。
此外，如何才能使当我单击菜单按钮时，菜单列表会将下面的所有内容下推，这样它就不会停留在下面？ (试试我的网页，看看我的意思，不是将正文内容与列表一起下推，而是正文内容与列表重叠)。
最后但并非最不重要的一点是，如何在调整浏览器大小时使图像重新缩放？ (查看我的网页和完成的网页)。
最佳答案
此时，按钮向右浮动，因为在 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 block 中重新设置它。
要强制您的图像缩放，您可以根据 % 调整它们的大小。例如，如果你做了 width:80%;那么它们将是其父元素的 80%。在实践中，这并不总是那么容易，因为您需要有多个 @media 规则，以便图像大小保持适当，并且当 bootstrap 网格在狭窄的视口(viewport)中折叠时不会让您觉得奇怪。
希望这对您有所帮助!
关于html - Bootstrap 和响应式菜单列表和图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25753700/