响应的背景图像与导航栏菜单按钮

Question

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

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

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

Answer 1

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

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

我总是添加

img{width:100%}

我的图片是百分比而不是像素。因此，如果/当其他设备查看它时，它们会进行调整。但是，我通常会创建不同大小的图像。我的徽标在桌面上比在移动设备和平板电脑上更大。我知道我没有回答你当前的问题，但希望我能让你对这个选项有所了解。