我正在为大多数已经完成的电子邮件客户端编写侧边栏，但是当我尝试将内容放置在主体区域（另一行）中时，我注意到如果屏幕变小了，它会包裹起来，如果不可以的话。我似乎无法弄清楚是什么原因造成的。
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。
答案 0 :(得分：0)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<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="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-sm-12 col-lg-4 col-12">
<img class="img-fluid" src="http://pngimg.com/uploads/php/php_PNG44.png">
<div>
<span class="">Firstname Last</span>
<p class="">name@email.com</p>
</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>
</div>
<div class="col-md-8 col-sm-12 col-lg-8 col-12">
<p>
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
发生这种情况的原因是引导程序类使用不正确。检查这个垃圾桶，希望对您有帮助https://jsbin.com/dedikiredo/edit?html