Первая проблема;У меня очень мало практических знаний по Bootstrap / CSS, я скопировал код из разных мест и сам адаптировал его, чтобы мое решение работало.Вторая проблема;Я знаю, что мне нужны контейнеры / строки / столбцы, но я не уверен, как правильно их вложить вокруг моей панели навигации (навсегда прикрепленной слева) и поверх фонового изображения.Это для мобильного веб-приложения, и я хотел бы создать формы, которые будут располагаться поверх фонового изображения.
Я потратил почти 2 целых дня на исследование и вставку контейнеров, строк, столбцов вокруг моего существующего кода.но все, чего он добивается, это перемещение макета, перемещение навигационной панели в центр, и текст появляется над или под изображением, но не над ним.Фоновое изображение устанавливается в css в голове, код ниже.
body,
html {
height: 100%;
margin: 0;
}
.bg {
background: url("Red_polygon.jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.navbar-custom {
background-color: rgba(22, 22, 22, 1)
}
.thumbnail {
float: left;
margin: 2px 0px 2px 2px;
background: transparent;
border: 0 none;
box-shadow: none;
}
<nav class="navbar navbar-custom navbar-fixed-top">
<div class="thumbnail" border="0">
<img src="ASD_header_logo.png" alt="Active Software Development" width=277 height=76 />
</div>
</nav>
<body>
<nav class="navbar navbar-custom navbar-fixed-top">
<div class="thumbnail" border="0">
<img src="ASD_header_logo.png" alt="Active Software Development" width=277 height=76 />
</div>
</nav>
<div class="bg">
<div class="wrapper">
</div>
<nav id="sidebar">
<ul class="list-unstyled components">
<p>
<center>
<h4>Management Information System</h4>
</center>
</p>
<li>
<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Project nav</a>
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>
<a href="#">Projects</a>
</li>
<li>
<a href="#">Activities</a>
</li>
<li>
<a href="#">Tasks</a>
</li>
<li>
<a href="#">Staff</a>
</li>
</ul>
</li>
<li>
<a href="#">Help</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
<ul class="list-unstyled components">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Logout</a>
</li>
</ul>
</nav>
</div>
Я ожидаю, что что-то неправильно сделал, чтобы структурировать панель навигации и фоновое изображение, и просто задаюсь вопросом, может ли кто-нибудь помочь мне понять, что я сделал неправильно,и как это исправить.Извиняюсь за огромное количество кода, но я не уверен, что актуально, а что нет после того, что я попробовал.Заранее благодарим и всего наилучшего.