带有导航栏菜单按钮的响应式背景图像答案

【问题标题】：Responsive background image with navbar menu buttons带有导航栏菜单按钮的响应式背景图像
【发布时间】：2015-03-19 06:28:55
【问题描述】：

在 Bootstrap 3 中，我有一个导航栏，其中包含背景图像和图像下的一些菜单项：

这是背景图片的css：

.navbar-fixed-bottom .navbar-collapse {
    padding-left: 0;
    padding-right: 0;
    margin-top: 25px;
    background: url(../Content/images/1.png),    url(../Content/images/2.png);
    background-repeat: no-repeat, no-repeat;
    background-position: -25px 0px, 528px 54px;

这是两张图片，我必须以像素为单位指定位置才能将它们粘合在一起。

我也在使用 navbar-right 将菜单项放在图像的正下方：

@media (min-width: 768px) {
.navbar-left {
    float: left !important;
}

.navbar-right {
    float: right;
    margin-right: 150px;
}

    .navbar-right ~ .navbar-right {
        margin-right: 50px;
    }
}

一切正常，直到我把屏幕尺寸变小，然后我的菜单项被推到左边：

我想知道如何保持这些菜单项相对于背景图像，例如反应灵敏。

【问题讨论】：

标签： html css twitter-bootstrap-3 background-image navbar

【解决方案1】：

如果这是您的目标设计，您可能需要考虑另一种方式将其放在移动设备上。

如果这是你想要的，也许是标准测试而不是块。我通常为我的移动设备创建较小的图像，并在需要时让 CSS 控制它们。

我总是加

img{width:100%}

我的图像是百分比而不是像素。因此，如果/当不同的设备查看它时，它们会进行调整。但是，我通常会创建不同尺寸的图像。我的标志在台式机、移动设备和平板电脑上更大。我知道我没有回答您的直接问题，但希望我能让您对选项进行更多思考。

【讨论】：