列没有在移动视图或小屏幕中进行调整，而是移动到引导程序4中的下一行

Question

当我检查浏览器以查看行内的列时，它们不在一行中，列正在移动到另一行。

<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-lg-2 col-md-2  col-xs-5">
<div class="brand-logo">
<img src="logo.png" class="rounded-circle">
</div>
</div>
<div class="col-sm-5 col-lg-7 col-md-7  col-xs-3">
<div>smmm</div>
</div>

<div class="col-sm-4 col-lg-3 col-md-3  col-xs-4 ">
<div class="right-header d-flex justify-content-end">
<div class="header-account">
<i class="fa fa-user" aria-hidden="true"></i>
</div>
<div class="header-cart">
<i class="fa fa-shopping-cart" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>

Answer 1

Bootstrap 4中的移动前缀不是.col-xs-而是.col-，因此您只需要将所有col-xs-*更改为col-*:

<div class="col-sm-3 col-lg-2 col-md-2 col-5">
^^

<div class="col-sm-5 col-lg-7 col-md-7 col-3">
^^

<div class="col-sm-4 col-lg-3 col-md-3 col-4">
^^