Bootstrap 4 вертикальное меню изображения с фоном изображения - PullRequest
Новая
       11

Bootstrap 4 вертикальное меню изображения с фоном изображения

1 голос
/ 01 октября 2019

Привет, большое спасибо за то, что заглянули и протянули руку ниже:

Я построил в старом - перед любым отзывчивым и поддерживающим BS сайтом вертикальное меню изображения с фоновым изображением, серия div / кнопок меняется при наведении. Я хотел бы воспроизвести это с использованием BS4 и включить это вертикальное меню изображения в шаблон col-md-3 / col-md-9.

Я рассмотрел все решения для изменения размера фонового изображения с помощью отдельныхКлассы / CSS безрезультатны, не говоря уже о наложении изображений кнопок с их эффектом наведения ...

Я хотел бы посеять вам текущую ситуацию (например, без ответа ...), но покаЯ не могу поставить свою песочницу онлайн и, очевидно, не могу использовать JFiddle с моими собственными изображениями, о ..? Будет ли еще одна общедоступная песочница, которую я мог бы использовать для отображения текущего состояния?

, как показано ниже: enter image description here

Полагаю, это будет моей первой и главной задачейвопрос…: (

Большое спасибо, JMB

1 Ответ

0 голосов
/ 04 октября 2019

Я не уверен, полностью ли понимаю ваше требование, но ниже я добавил что-то похожее, посмотрите, поможет ли это 

<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>
...