Я писал боковую панель для почтового клиента, которую я в основном выполнил, но когда я попытался поместить контент в основную часть тела (другая строка), я заметил, что он будет перенесен, если экран уменьшится, когда не должен,Я не могу понять, что вызывает такое поведение.
body {
background-color: WhiteSmoke;
}
nav {
// border: solid 1px blue;
// background-color: WhiteSmoke;
}
ul {
list-style-type: none;
// background-color: yellow;
}
div.container {
// background-color: blue;
}
span {
// background-color: purple;
}
li {
// background-color: lightblue;
}
ul>div>li span.fa-caret-right {
color: green;
}
ul>div>li span.fa-flushed {
color: green;
}
ul>div>li span.fa-trash {
color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<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">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Muli">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link rel="stylesheet" href="./sidebar.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<nav class="w-350">
<div class="row align-items-center">
<img class="img-fluid col-3" src="http://pngimg.com/uploads/php/php_PNG44.png">
<div class="row">
<span class="col-8">Firstname Last</span>
<p class="col-8">name@email.com</p>
</div>
</div>
<ul>
<div>
<button type="button" class="col-9 btn btn-primary">Compose</button>
<li><span class="col-1 fas fa-caret-right p-3"></span><a class="col-11" href="#">Inbox</a></li>
<li><span class="col-1 fas fa-caret-right p-3"></span><a class="col-11" href="#">drafts</a></li>
<li><span class="col-1 fas fa-caret-right p-3"></span><a class="col-11" href="#">sent</a></li>
<li><span class="col-1 fas fa-flushed p-3"></span><a class="col-11" href="#">spam</a></li>
<li><span class="col-1 fas fa-trash p-3"></span><a class="col-11" href="#">trash</a></li>
</div>
</ul>
</nav>
<input type="text" class="col-8 form-control" placeholder="Search">
<span class="fas fa-caret-left"></span>
<span class="fas fa-backward"></span>
<span class="fas fa-caret-right"></span>
<span class="fas fa-times"></span>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Большая часть CSS закомментирована.Это произошло просто методом проб и ошибок.Весь закомментированный код будет удален после того, как я получу шаблон для работы клиента.Фактически, большинство стилей не работает в настоящее время из-за изменений, которые я сделал в html, но я все равно включаю CSS.