Bootstrap 4 带有图像背景的垂直图像菜单答案

【问题标题】：Bootstrap 4 vertical image menu with image backgroundBootstrap 4 带有图像背景的垂直图像菜单
【发布时间】：2020-01-31 03:50:34
【问题描述】：

您好，非常感谢您的光临，并在下面提供帮助：

我已经在旧的 - 在任何响应式和支持 BS 的网站之前构建了一个图像垂直菜单，带有背景图像，一系列 div / 按钮在悬停时发生变化。我想使用 BS4 重现此内容，并将此垂直图像菜单包含在 col-md-3 // col-md-9 样板中。

我已经查看了通过单独的类/CSS 调整背景图像大小的所有解决方案，但均无济于事，更不用说将按钮图像与其相关的悬停效果叠加...

我想向您介绍目前的情况（例如，无响应......）但目前我还不能将我的沙盒放到网上，而且显然不能将 JFiddle 与我自己的图像一起使用，o.. ?是否有另一个公共沙箱可以用来显示当前状态？

如下：

我想这将是我的第一个也是最重要的问题……:(

非常感谢，捷豹路虎

【问题讨论】：

为了清楚起见，您是想保留图像还是考虑使用引导按钮重新设计菜单？
您好，感谢您的关注。事实上，我希望每个菜单项都保留为 href 项（可能以 sprites 与 :hover image 替代方案的形式......？）。悬停时每个项目都会向右移动，而不会破坏背景中的整体“游戏”图像（我一辈子都记不住这个儿童游戏的名字......）。非常感谢 JMB
我正在添加处于非响应状态的菜单以供在我的沙箱中参考：http://sandbox.jmbdev.com 非常感谢，

标签： css image responsive

【解决方案1】：

我不确定我是否完全理解您的要求，但下面我在类似的行中添加了一些内容，看看是否有任何帮助

<html lang="en">
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<style>
.sidemenuitem:hover{
  margin-left: 20px;
}
.sidemenu{
width : 20%;
background: -webkit-gradient(linear, left top, right top, from(#3e4b5b), to(#DDD)) !important;
background: linear-gradient(to right, #3e4b5b, #DDD) !important;
}
.mainarea {
background: -webkit-gradient(linear, left top, right top, from(#3e4b5b), to(#DDD)) !important;
background: linear-gradient(to right, #3e4b5b, #DDD) !important;
}
</style>
<body>
<div class="container row">
<div class="sidemenu col-2">
	<div class="row"><div type="button" class="col-12 btn btn-primary sidemenuitem">1</div></div>
    <div class="row"><div type="button" class="col-12 btn btn-success sidemenuitem">2</div></div>
    <div class="row"><div type="button" class="col-12 btn btn-warning sidemenuitem">3</div></div>
    <div class="row"><div type="button" class="col-12 btn btn-info sidemenuitem">4</div></div>
    <div class="row"><div type="button" class="col-12 btn btn-danger sidemenuitem">5</div></div>
    <div class="row"><div type="button" class="col-12 btn btn-primary sidemenuitem">6</div></div>
    <div class="row"><div type="button" class="col-12 btn btn-success sidemenuitem">7</div></div>
    <div class="row"><div type="button" class="col-12 btn btn-info sidemenuitem">8</div></div>
    <div class="row"><div type="button" class="col-12 btn btn-danger sidemenuitem">9</div></div>
    <div class="row"><div type="button" class="col-12 btn btn-primary sidemenuitem">10</div></div>
</div>
<div class="mainarea col-10">
Lots Of content  Lots Of content  Lots Of content Lots Of content 
Lots Of content Lots Of content Lots Of content Lots Of content Lots Of content 
Lots Of content Lots Of content Lots Of content Lots Of content Lots Of content Lots Of content 
Lots Of content Lots Of content Lots Of content 
Lots Of content Lots Of content Lots Of content 
</div>
</div>
</div>

</body>
</html>

【讨论】：

您好 RR1112，感谢您的回复。这对于理解“响应性”非常有帮助，但是，正如您从我的“沙盒”中看到的那样，我在这个菜单上遇到的问题至少有两个： - 一个背景图像 div，我想要响应，无论父容器（在这种情况下是 col-md-3 div ...），并且在.. - 菜单项，可点击，由图像组成（背景而不是内联，我猜...？），这显然也需要响应以适应上面提到的父级 div ...正如我最初的非响应式菜单/沙箱中所见