如果另一个内容太大，如何停止包裹到下一行
我正在尝试在Bootstrap列表组中显示三个项目。
在此，在中间，如果内容大于当前在左上溢出的内容。
到目前为止我提出的代码是：
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0-9/css/all.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center">
<div class="d-flex align-items-end">
<img class="rounded-circle" src="https://i.pravatar.cc/300" style="width: 50px;height:50px;object-fit: cover;" />
<span style="margin-left: -20px;margin-bottom: -8px;" class="font-weight-bold text-warning"><i class="fa fa-users fa-2x"></i></span>
</div>
<div class="ml-2">
<p class="h3 py-3">
Dapibus ac facilisis in
</p>
</div>
</div>
<p class="font-weight-light">05-19-2022 4:20</p>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center">
<div class="d-flex align-items-end">
<img class="rounded-circle" src="https://i.pravatar.cc/150?u=a042581f4e29026704e" style="width: 50px;height:50px;object-fit: cover;" />
<span style="margin-left: -20px;margin-bottom: -8px;" class="font-weight-bold text-warning"><i class="fa fa-users fa-2x"></i></span>
</div>
<div class="ml-2">
<p class="h3 py-3">
Nullam semper lorem eget tortor consectetur, id mollis magna scelerisque.
</p>
</div>
</div>
<p class="font-weight-light">05-19-2022 4:20</p>
</li>
</ul>
<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://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>当文本内容较大时，如何将其保持不变，而不会更改其布局？
我想使用纯Bootstrap来实现这一目标。
I am trying to display three items in a bootstrap list group.
Here, in the middle, if the content is larger than it is currently making the content on the left overflowed.
The code i have came up with so far is:
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0-9/css/all.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center">
<div class="d-flex align-items-end">
<img class="rounded-circle" src="https://i.pravatar.cc/300" style="width: 50px;height:50px;object-fit: cover;" />
<span style="margin-left: -20px;margin-bottom: -8px;" class="font-weight-bold text-warning"><i class="fa fa-users fa-2x"></i></span>
</div>
<div class="ml-2">
<p class="h3 py-3">
Dapibus ac facilisis in
</p>
</div>
</div>
<p class="font-weight-light">05-19-2022 4:20</p>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center">
<div class="d-flex align-items-end">
<img class="rounded-circle" src="https://i.pravatar.cc/150?u=a042581f4e29026704e" style="width: 50px;height:50px;object-fit: cover;" />
<span style="margin-left: -20px;margin-bottom: -8px;" class="font-weight-bold text-warning"><i class="fa fa-users fa-2x"></i></span>
</div>
<div class="ml-2">
<p class="h3 py-3">
Nullam semper lorem eget tortor consectetur, id mollis magna scelerisque.
</p>
</div>
</div>
<p class="font-weight-light">05-19-2022 4:20</p>
</li>
</ul>
<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://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>How to keep that content as it is without changing its layout when the text content is large?
I wanted to achieve this using the pure bootstrap.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
请尝试白色空间：NowRap for for for for for for for for for for for for for for the for
Please try white-space: nowrap for the font-weight-light class
您只需要在这些元素中添加 class =“ text-nowrap” 。
You just need to add class="text-nowrap" in those elements.