#css #bootstrap-4
#css #bootstrap-4
Вопрос:
Первая проблема; У меня очень мало практических знаний о 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> Я ожидаю, что я что-то неправильно сделал для структурирования панели навигации и фонового изображения, и просто интересно, может ли кто-нибудь помочь мне понять, что я сделал не так, и как это исправить. Прошу прощения за огромное количество кода, но я не уверен, что актуально, а что нет после того, сколько всего я перепробовал. Заранее благодарю вас и с наилучшими пожеланиями.
Ответ №1:
Я вставил очень простую структуру, чтобы включить то, что вы упомянули выше. Однако не уверен, что вы собираетесь использовать код, который вы упомянули выше. Итак, давайте поговорим дальше, если вам нужна дополнительная помощь.
body,
html {
height: 100%;
margin: 0;
}
.bg {
background: url("https://www.publicdomainpictures.net/pictures/130000/velka/abstract-magical-background.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;
} <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<body class="">
<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="container-fluid">
<div class="row">
<div class="col-2">
<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>
<div class="col-10">
<div class="bg">
<form class="text-white">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</div>
</body> Комментарии:
1. Привет, Чару, спасибо за ваш ответ. Это сработало, но у меня есть немного пробелов, что, вероятно, связано с количеством css на боковой панели. Однако теперь я могу обойти это и буду учиться на своих ошибках. Большое спасибо за вашу помощь.
2. Отлично! Всего наилучшего