使用引导网格时，输入元素具有意外的包装行为
使用引导网格时，输入元素具有意外的包装行为
提问于 2019-07-03 10:41:13
我正在为一个我已经基本完成的电子邮件客户端编写一个侧边栏，但是当我试图将内容放在正文区域(另一行)时，我注意到如果屏幕变小了，它会自动换行，而实际上屏幕不应该变小。
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。
回答 1
Stack Overflow用户
发布于 2019-07-03 13:04:05
<!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
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56862230
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号