Bootstrap中的网格布局，看看怎么垂直对齐和水平对齐

1. Bootstrap中的网格布局概述

Bootstrap是一种流行的前端框架，它提供了一套基于栅格系统的网格布局，帮助开发人员构建响应式的网页设计。网格布局是指将页面分成数个列（column）和行（row），是实现页面布局的重要方法。

在Bootstrap中，网格布局通过row和col-*类实现。row是一个顶级的容器，用来包含一行列，而col-*类是用来定义每一列的宽度、偏移和排序等属性的。

下面是一个简单的网格布局示例：

<div class="container">

  <div class="row">
    <div class="col-sm-4">
      <p>Column 1</p>
    </div>
    <div class="col-sm-4">
      <p>Column 2</p>
    </div>
    <div class="col-sm-4">
      <p>Column 3</p>
    </div>
  </div>
</div>

上面的示例中，父容器.container包含了一个row和三个col-sm-4列。每个列的宽度被设置为1/3（即12列中的4列），这意味着它们在屏幕上应该占用相等的空间。

2. 垂直对齐

在实际开发中，我们有时需要将网格中的内容垂直居中。Bootstrap提供了几种方式来实现这一效果。

2.1 基于Flexbox的垂直居中

Flexbox是一种强大的布局方式，可以帮助我们实现复杂的布局效果。下面是一个基于Flexbox的垂直居中布局示例：

<div class="container">

  <div class="row align-items-center">
    <div class="col">
      <h3>Heading</h3>
      <p>Lorem ipsum dolor sit amet,<br> consectetur adipisicing elit.</p>
    </div>
    <div class="col text-center">
      <img src="image.jpg" alt="image">
    </div>
  </div>
</div>

在上面的示例中，我们使用了align-items-center类来让row元素垂直居中。

还可以在每个col元素上应用d-flex和flex-column类来使其成为Flexbox容器，并让其中的内容垂直居中。

2.2 基于表格的垂直居中

另一种常见的垂直居中方式是使用表格。可以将row元素定义为一个表格，然后将其内部的col元素定义为表格单元格。如下所示：

<div class="container">

  <div class="row align-items-center table">
    <div class="col col-md-6">
      <h3>Heading</h3>
      <p>Lorem ipsum dolor sit amet,<br> consectetur adipisicing elit.</p>
    </div>
    <div class="col col-md-6 text-center table-cell vertical-align-middle">
      <img src="image.jpg" alt="image">
    </div>
  </div>
</div>

上面的示例中，我们添加了table和table-cell类，其中table让row元素成为表格，而table-cell让每个col元素成为表格单元格。

然后，我们使用CSS样式设置了表格单元格的垂直居中方式。vertical-align-middle类设置了单元格的垂直居中属性。

3. 水平对齐

类似于垂直居中，我们也可以在Bootstrap中实现水平对齐。Bootstrap提供了几种基于CSS和JavaScript的方法来实现水平对齐。

3.1 文本水平居中

对于行内元素和一些块级元素（例如按钮和图片），可以使用text-center类来实现文本水平居中。如下所示：

<div class="container">

  <div class="row">
    <div class="col text-center">
      <button class="btn">Button</button>
    </div>
  </div>
</div>

上面的示例中，我们在.col元素上应用了text-center类，使其中的按钮居中。同样的效果也可以应用在图片上。

3.2 基于Flexbox的水平居中

Flexbox也提供了一种简单的方法来实现水平居中。设置容器元素的display属性为flex，再设置justify-content属性为center即可。如下所示：

<div class="container">

  <div class="row justify-content-center">
    <div class="col-md-6">
      <h3>Heading</h3>
      <p>Lorem ipsum dolor sit amet,<br> consectetur adipisicing elit.</p>
    </div>
  </div>
</div>

以上示例中，我们在.row元素上应用了justify-content-center类，使其中的.col元素水平居中。类似于Flexbox的垂直居中（2.1节），也可以在每个.col元素上应用d-flex和flex-column类来使其成为Flexbox容器，并让其中的内容垂直居中。

3.3 基于jQuery的水平居中

最后，我们可以使用jQuery来实现水平居中。以下是一个示例：

<div class="container">

  <div class="row">
    <div class="col-md-6 text-center">
      <img src="image.jpg" alt="image">
    </div>
  </div>
</div>
<script>
  $(document).ready(function() {
    var imgWidth = $('.img-fluid').width();
    $('.img-fluid').css('margin-left', -imgWidth / 2);
  });
</script>

这个示例中，我们使用jQuery获取了图片的宽度，然后将其margin-left属性设置为其宽度的一半，从而实现了水平居中的效果。

4. 结论

Bootstrap的网格布局是一种非常强大和灵活的布局方式。通过使用row和col-*类，我们可以轻松地创建网格布局，并且可以在其中实现垂直和水平对齐效果。在实际开发中，我们应该根据项目的需求选择最合适的对齐方式。