runoops.com

Bootstrap5 教程

Bootstrap5 列(Columns) 

借助我们的 flexbox 网格系统，了解如何使用一些对齐、排序和偏移选项修改列。此外，请参阅如何使用列类来管理非网格元素的宽度。

在深入研究如何修改和自定义网格列之前，请务必先阅读网格页面。

它们是如何工作的 

  • 列建立在网格的弹性框架构上。 Flexbox 意味着我们可以选择更改单个列和 [在行级别修改列组]。您可以选择列的增大、收缩或其他更改方式。
  • 构建网格布局时，所有内容都放在列中。 Bootstrap 网格的层次结构从 container 到行到列再到您的内容。在极少数情况下，您可能会将内容和列组合在一起，但请注意，可能会产生意想不到的后果。
  • Bootstrap 包括用于创建快速、响应式布局的预定义类。 通过 六个断点和每个网格层的十几列，我们已经为您构建了数十个类来创建所需的布局。如果您愿意，可以通过 Sass 禁用此功能。

对齐 

使用弹性框对齐实用程序垂直和水平对齐列。

垂直对齐 

使用任何响应式align-items-*类更改垂直对齐方式。

实例

Run this code »
<div class="container mt-3 bg-success" style="height: 200px;">

    <div class="row align-items-start">
      <div class="col bg-primary">
        第一列
      </div>
      <div class="col bg-secondary">
        第二列
      </div>
      <div class="col bg-info">
        第三列
      </div>
    </div>
  </div>

实例

Run this code »
<div class="container mt-3 bg-success" style="height: 200px;">

    <div class="row align-items-center">
      <div class="col bg-primary">
        第一列
      </div>
      <div class="col bg-secondary">
        第二列
      </div>
      <div class="col bg-info">
        第三列
      </div>
    </div>
  </div>

实例

Run this code »
<div class="container mt-3 bg-success" style="height: 200px;">

    <div class="row align-items-end">
      <div class="col bg-primary">
        第一列
      </div>
      <div class="col bg-secondary">
        第二列
      </div>
      <div class="col bg-info">
        第三列
      </div>
    </div>
  </div>

或者，使用任何响应式 .align-self-* 类单独更改每列的对齐方式。

实例

Run this code »
<div class="container mt-3 bg-success" style="height: 200px;">

    <div class="row">
      <div class="col bg-primary align-self-start">
        第一列
      </div>
      <div class="col bg-secondary align-self-start">
        第二列
      </div>
      <div class="col bg-info align-self-start">
        第三列
      </div>
    </div>
  </div>

水平对齐

实例

Run this code »
<div class="container mt-3 bg-success" style="height: 300px;">

    <div class="row justify-content-start">
      <div class="col-4 bg-primary">
        第一列
      </div>
      <div class="col-4 bg-secondary">
        第二列
      </div>
    </div>

    <div class="row justify-content-center">
      <div class="col-4 bg-info">
        第一列
      </div>
      <div class="col-4 bg-warning">
        第二列
      </div>
    </div>
    <div class="row justify-content-end">
      <div class="col-4 bg-primary">
        第一列
      </div>
      <div class="col-4 bg-secondary">
        第二列
      </div>
    </div>
    <div class="row justify-content-around">
      <div class="col-4 bg-info">
        第一列
      </div>
      <div class="col-4 bg-warning">
        第二列
      </div>
    </div>
    <div class="row justify-content-between">
      <div class="col-4 bg-primary">
        第一列
      </div>
      <div class="col-4 bg-secondary">
        第二列
      </div>
    </div>
    <div class="row justify-content-evenly">
      <div class="col-4 bg-info">
        第一列
      </div>
      <div class="col-4 bg-warning">
        第二列
      </div>
    </div>

列包装

如果在一行中放置超过12列，则每组额外的列将作为一个单元包装到新行上。

实例

Run this code »
 <div class="container mt-3 bg-success" style="height: 200px;">
  <div class="row">
    <div class="col-9">.col-9</div>
    <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
    <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
  </div>
</div>

分栏符

在flexbox中将列拆分为新行需要一个小技巧：添加一个 width: 100%，无论您想在哪里将列包装到新行。通常这是通过多个 .row来完成的，但并非每种实现方法都可以解决这个问题。

实例

Run this code »
<div class="container mt-3 bg-success" style="height: 200px;">

    <div class="row">
      <div class="col-6 col-sm-3 bg-warning">.col-6 .col-sm-3</div>
      <div class="col-6 col-sm-3 bg-info">.col-6 .col-sm-3</div>
  
      <!-- 强制下一列换行 -->
      <div class="w-100"></div>
  
      <div class="col-6 col-sm-3 bg-primary">.col-6 .col-sm-3</div>
      <div class="col-6 col-sm-3 bg-secondary">.col-6 .col-sm-3</div>
    </div>
  </div>

可以使用我们的响应式显示实用程序在特定的断点处应用此中断。

实例

Run this code »
<div class="container mt-3 bg-success" style="height: 200px;">

    <div class="row">
      <div class="col-6 col-sm-4 bg-warning">.col-6 .col-sm-4</div>
      <div class="col-6 col-sm-4 bg-info">.col-6 .col-sm-4</div>

      <!-- 强制下一列在 md 断点处换成换行p -->
      <div class="w-100 d-none d-md-block"></div>

      <div class="col-6 col-sm-4 bg-primary">.col-6 .col-sm-4</div>
      <div class="col-6 col-sm-4 bg-secondary">.col-6 .col-sm-4</div>
    </div>
  </div>

重新排序

排序类

使用 .order-类来控制内容的 视觉顺序 。这些类是响应式的，因此您可以按断点设置 order （例如，.order-1.order-md-2）。包括对所有6个网格层的1 到 5 的支持。

实例

Run this code »
<div class="container mt-3 bg-success" style="height: 200px;">
    <div class="row">
      <div class="col bg-primary">
        First in DOM, no order applied
      </div>
      <div class="col order-5 bg-secondary">
        Second in DOM, with a larger order
      </div>
      <div class="col order-1 bg-warning">
        Third in DOM, with an order of 1
      </div>
    </div>
  </div>

还有响应的 .order-first 和 .order-last 类 ，它们分别通过应用 order: -1 和 order: 6来更改元素的order。这些类也可以根据需要与编号的 .order-*类混合使用。

实例

Run this code »
<div class="container mt-3 bg-success" style="height: 200px;">
    <div class="row">
      <div class="col order-last bg-primary">
        First in DOM, ordered last
      </div>
      <div class="col bg-secondary">
        Second in DOM, ordered secondary
      </div>
      <div class="col order-first bg-warning">
        Third in DOM, ordered first
      </div>
    </div>
  </div>

偏移列

偏移类

偏移列通过 offset-*-* 类来设置。第一个星号( * )可以是 sm、md、lg、xl，表示屏幕设备类型，第二个星号( * )可以是 1 到 11 的数字。

为了在大屏幕显示器上使用偏移，请使用 .offset-md-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。

例如：.offset-md-4 是把.col-md-4 往右移了四列格。

实例

Run this code »
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
  <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>

除了在响应断点处清除列之外，还可能需要重置偏移量。在 网格示例中可以看到这一点。

实例

Run this code »
<div class="container">
  <div class="row">
    <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
  </div>
  <div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
    <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
  </div>
</div>

边距实用程序

通过在v4中迁移到flexbox，您可以使用诸如.me-auto之类的边距实用程序强制同级列彼此分离。

实例

Run this code »
<div class="row">
      <div class="col-md-4 bg-primary">.col-md-4</div>
      <div class="col-md-4 ms-auto bg-info">.col-md-4 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ms-md-auto bg-secondary">.col-md-3 .ms-md-auto</div>
      <div class="col-md-3 ms-md-auto bg-success">.col-md-3 .ms-md-auto</div>
    </div>
    <div class="row">
      <div class="col-auto me-auto bg-info">.col-auto .me-auto</div>
      <div class="col-auto bg-warning">.col-auto</div>
    </div>

独立列类

.col-*类也可以在.row外部使用，为元素提供特定的宽度。 当列类用作行的非直接子级时，将忽略填充。

实例

Run this code »
<div class="container mt-3 text-center">

    <div class="col-3 p-3 mb-2 bg-secondary">
      .col-3: width of 25%
    </div>
    
    <div class="col-sm-9 p-3 bg-info">
      .col-sm-9: width of 75% above sm breakpoint
    </div>
  </div>

这些类可以与实用程序一起使用来创建响应的浮动图像。如果文本较短，请确保将内容包装在 .clearfix 包装器中以清除浮动。

实例

Run this code »
<div class="container mt-3 text-center">

    <div class="clearfix">
      <img src="//demo.runoops.com/static/img/a1.jpg" class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">
    
      <p>
        A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
      </p>
    
      <p>
        As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.
      </p>
    
      <p>
        And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.
      </p>
    </div>
  </div>
标签：

相关推荐

Captcha Code

0 笔记

分享笔记

Inline Feedbacks
View all notes

文章目录