主题介绍：'col-md-3' 行不正确

问题描述

在使用 Bootstrap 栅格系统时，我们需要使用 row 和 col-*-* 来实现页面布局。col-*-* 是指定列的宽度，而 row 是用来包含每一行中的列的容器。在使用 col-*-* 时，我们通常会指定它所占的屏幕宽度比例（比如 col-md-6 表示占据屏幕宽度的一半），并且把所有列的比例加起来要等于12，否则就会出现布局错乱的问题。

那么，对于 col-md-3，它表示占据屏幕宽度的四分之一，属于常见的宽度比例之一，那么为什么会出现行不正确的情况呢？

常见错误

在使用 col-md-3 时，常见的错误是没有添加 row 来包含这些列，或者在添加 col-md-3 的同时还添加了其他的 col-*-*，这就导致了布局的错乱。

具体来说，常见的错误形式包括以下几种：

1. 没有添加 row：

<div class="col-md-3">内容1</div>
<div class="col-md-3">内容2</div>
<div class="col-md-3">内容3</div>
<div class="col-md-3">内容4</div>

上述代码中，没有添加 row 来包含这4个 col-md-3，那么它们就不归属于同一个容器，自然也就无法正确排列。

2. 添加了其他的 col-*-*：

<div class="row">
  <div class="col-md-3">内容1</div>
  <div class="col-md-6">内容2</div>
  <div class="col-md-3">内容3</div>
</div>

上述代码中，虽然添加了 row，但是同时还添加了 col-md-6，这就导致了比例出现了问题，即使把它们加起来等于 12，但是其中 col-md-6 的宽度占据了屏幕的一半，已经超出了 col-md-3 的四分之一，因此也会出现布局错乱的问题。

解决方法

让 col-md-3 正确排列的方法很简单，只需要按照如下步骤操作即可：

1. 先添加一个 row 来包含要排列的 col-md-3。
2. 把所有 col-md-3 的比例加起来等于 12。

正确的代码如下：

<div class="row">
  <div class="col-md-3">内容1</div>
  <div class="col-md-3">内容2</div>
  <div class="col-md-3">内容3</div>
  <div class="col-md-3">内容4</div>
</div>

在上述代码中，我们添加了一个 row 来包含这 4 个 col-md-3，同时它们的比例加起来等于 12，因此就能正确排列了。

总结

以上就是关于 'col-md-3 行不正确' 问题的介绍和解决方法。总的来说，这个问题是比较容易解决的，只需要按照 Bootstrap 的规范来写就可以了。在实际开发中，要特别注意添加 row 并保证比例的正确性，才能实现理想的页面布局效果。