Bootstrap流式布局-20140515

最新推荐文章于 2024-03-12 20:16:50 发布

原创最新推荐文章于 2024-03-12 20:16:50 发布 · 563 阅读

0 ·

CC 4.0 BY-SA版权

学习同时被 3 个专栏收录

219 篇文章

订阅专栏

前端技术

188 篇文章

订阅专栏

web

7 篇文章

订阅专栏

本文介绍了一种适应屏幕的流式布局方法，通过使用百分比而非固定宽度，使得内容能够自适应不同尺寸的屏幕，如手机和平板等。文章通过具体的HTML代码示例展示了如何实现这种布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

流布局是一种适应屏幕的做法。即不固定块的宽度，而是采用百分比作为单位来确定每一块的宽度。这种布局非常适合一次编写，然后自适应各种不同大小的屏幕（手机，PAD…）。


<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
    </div>
    <div class="span10">
    </div> 
  </div> 
</div>

最外面包含块有 container-fluid类，表明内容布局是流布局，其主要作用是作为一个包含块来容纳流布局内容。里面包含块的内容有 row-fluid类（非常重要），决定是否是流布局。然后里面的内容块代码编写与网格系统一致，依然是从span1到span12，分别对应于不同的百分比。


<div class="row-fluid">
  <div class="span12">
    流动 12
    <div class="row-fluid">
      <div class="span6">
        流动 6
        <div class="row-fluid">
          <div class="span6">流动 6</div>
          <div class="span6">流动 6</div>
        </div>
      </div>
      <div class="span6">流动 6</div>
    </div>
  </div>
</div>

从这个例子我们可以看到，流式布局的包容性非常的强，也很好用，1最小 - 12最大，可以在一层套一层的制作，不管父类是多少，对于子类来说都是百分之百在6的div里在包裹两个6其实就相当于 100% 里面包裹了两个50%，只要层级关系，写好基本就没有什么错误