Bootstrap4 小工具

「爱情、让人受尽委屈。」 2021-09-15 01:58 471阅读 0赞

</div>

![70][]

![70 1][]

![70 2][]

</div>

![70 3][]

<div class="container">  
  <h2>响应式浮动</h2>  
  <p>重置浏览器大小查看效果。</p>  
  <p>我们看可以设置浮动 (.float-\*-left|right - \* 为 sm, md, lg 或 xl)的方向依赖于屏幕的大小:</p>   
  <div class="float-sm-right">在大于小屏幕尺寸上右浮动</div><br>  
  <div class="float-md-right">在大于中等屏幕尺寸上右浮动</div><br>  
  <div class="float-lg-right">在大于大屏幕尺寸上右浮动</div><br>  
  <div class="float-xl-right">在大于超大屏幕尺寸上右浮动</div><br>  
  <div class="float-none">没有浮动</div>

</div>

![70 4][]

## 居中对齐 ##

使用 **.mx-auto** 类来设置居中对齐

</div>

## 宽度 ##

元素上使用 w-\* 类 (**.w-25**, **.w-50**, **.w-75**, **.w-100**, **.mw-100**) 来设置宽度:

<h1>宽度设置小工具</h1>  
  <p>元素上使用 w-\* 类 (.w-25, .w-50, .w-75, .w-100, .mw-100) 来设置宽度:</p>  
  <div class="w-25 bg-warning">宽度 25%</div>  
  <div class="w-50 bg-warning">宽度 50%</div>  
  <div class="w-75 bg-warning">宽度 75%</div>  
  <div class="w-100 bg-warning">宽度 100%</div>  
  <div class="mw-100 bg-warning">最大宽度 100%</div>

</div>

![70 5][]

<div class="container">  
  <h1>高度小工具</h1>  
  <p>元素上使用 h-\* 类 (.h-25, .h-50, .h-75, .h-100, .mh-100) 来设置高度:</p>  
  <div style="height:200px;background-color:\#ddd">  
    <div class="h-25 d-inline-block p-2 bg-warning">高度 25%</div>  
    <div class="h-50 d-inline-block p-2 bg-warning">高度 50%</div>  
    <div class="h-75 d-inline-block p-2 bg-warning">高度 75%</div>  
    <div class="h-100 d-inline-block p-2 bg-warning">高度 100%</div>  
    <div class="mh-100 d-inline-block p-2 bg-warning" style="height:500px">最大高度 100%</div>  
  </div>

</div>

![70 6][]

[70]: /images/20210813/85f05e7605e94d55adaa83fac3b0929c.png
[70 1]: /images/20210813/459ba10c13d1448d9280634c2b2876a6.png
[70 2]: /images/20210813/fdf014031aec4c16ba5f861a688ce2c8.png
[70 3]: /images/20210813/49c1f2b578754f378cc5e3ba346825da.png
[70 4]: /images/20210813/648d9d0b0aec4e33b48f24133da47e5a.png
[70 5]: /images/20210813/61b243ef3bbe478386433b58dd8040f7.png
[70 6]: /images/20210813/3bb86e5c262a49d68a28d5cdf3dc9a99.png