html - Bootstrap 模板问题(移动菜单)

Question

致力于重新创建使用表格构建的客户旧模板。我正在使用 bootstrap 并且已经有一段时间没有使用它了，并且对导航菜单有疑问。当您调整它的大小时，定位与在桌面上查看它时的位置相去甚远。

有 bootstrap 经验的人可以帮助我解决如何让移动菜单在蓝色条中排列的问题，就像在桌面上查看时一样。

我确定我缺少的是一些简单的东西，而且我还没有弄乱媒体查询，我认为这是我需要开始的地方。

可以查看模板here .

Answer 1

仔细查看您的网站后，有两件事阻碍了 Bootstrap 的响应属性:您在正文中的图像和 Logo 。

从此更改您在正文中的图像:

<img src="http://greenetzconstruction.com/_images/100402_home.jpg" class="intro-pic">

为此:

<img src="http://greenetzconstruction.com/_images/100402_home.jpg" class="intro-pic img-responsive">

对于 Logo ，您可以将其作为导航栏品牌图像添加到栏中。除了 bootstrap 文档之外，您还有这个 navbar brand image - stackoverflow question 可以帮助您。

您可能还想为您的 Logo 添加 img-responsive 类:

<img src="./img/dave-greenetz-logo_02.jpg" class="img-responsive">

这就是当我向您的图像添加 img-responsive(水平滚动消失)时您的网站的样子: