我正在为电子邮件客户端编写一个侧边栏，我已经完成了大部分，但是当我尝试将内容放在主体区域(另一行)时，我注意到如果屏幕变小它会换行，而它不应该.我似乎无法弄清楚是什么导致了这种行为。
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。
最佳答案
<!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
关于html - 输入元素在引导网格中具有意外的包装行为，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56862230/