Bootstrap 5 အခြေခံ အဆင်း

အခြေခံ အဆင်း အကြောင်းကျည်း

ကျွန်တော်တို့ အခြေခံ ပတ်ဝန်းကျင် စက်တင် တစ်ခု ဖွဲ့စည်းပါ၊ အစကနဦး အခြေခံ အရာခံ ပိုင်းအား ပေါ်တွင် အဆင်းရှိသည်၊ ပိုမို အကျယ်အဝန်း အရာခံ အား ပေါ်တွင် အဆင်းချိန်း အဆင်းချိန်း ပြောင်းလဲသည်

အကြောင်းအရာ: အခြေခံ အဆင်း အကြောင်းကျည်း တူတွဲ သုံးသပ် ရာဇဝတ် သို့ ဖြေကြားရန်

အကြောင်းအရာ: အခြေခံ အဆင်း

<div class="container-fluid">
  

    <div class="col-sm-6 bg-primary">
      
列 1 ...

    

    <div class="col-sm-6 bg-dark">
      
列 2 ...

亲自试一试

提示：.col-sm-* 类中的数字表示 div 应该跨越多少列（共 12 列）。所以，.col-sm-1 跨越 1 列，.col-sm-4 跨越 4 列，.col-sm-6 跨越 6 列，以此类推。

注意：请确保总和等于或小于 12（不需要使用所有 12 个可用列）：

提示：通过将 .container-fluid 类更改为 .container，您可以将任何 full-width 布局转换为 fixed-width 的响应式布局：

实例：响应式容器


  

    

      
列 1 ...

    

    

      
列 2 ...

亲自试一试

自动布局列

在 Bootstrap 5 中，有一种简单的方法可以为所有设备创建等宽的列：只需从 .col-size-* 中删除数字，并仅在 col 元素上使用 .col-size 类。Bootstrap 将识别有多少列，并且每列将获得相同的宽度。size 类（sm、md 等）决定了列何时应该响应：




  
1 of 2

  
2 of 2






  
1 of 4

  
2 of 4

  
3 of 4

  
4 of 4

亲自试一试