输入元素具有引导网格的意外包装行为

Question

我正在为一个电子邮件客户端编写侧边栏，而该侧边栏我大部分已经完成了，但是当我尝试将内容放在主体区域（另一行）中时，我注意到如果屏幕变小了（如果屏幕不应该缩进的话），它将包裹起来。 我似乎无法弄清楚是什么导致了这种现象。

 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。

Answer 1

 <!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