![](/img/trans.png)
[英]bootstrap 4 columns are moving to next row when i see it on mobile view
[英]Columns are not adjusting in mobile view or small screen they are moving to next row in bootstrap 4
當我檢查瀏覽器以查看行內的列時,它們不在一行中,列正在移動到另一行。
<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>
Bootstrap 4 中的移動前綴不是.col-xs-
xs- 而是.col-
,因此您只需將所有col-xs-*
更改為 col- 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">
^^
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.