如何在HTML中使用引导列？

我目前正在学习HTML/CSS，我偶然发现在一个div中创建了一些列，这在网上我似乎无法理解。我正在尝试复制google高级搜索页面（）。我认为有3列（“查找带有…”的页面）、输入字段和“在搜索框中执行此操作”）

然而，我不能让这个看起来有效。我知道Bootstrap将视图分为12个部分，所以我使用宽度2作为第一部分，6作为第二部分，4作为最后一部分。但是，输出在1列中显示所有内容。下面是我的代码：

所有这些话：

确切的单词或短语：

以下任何一个词：

这些话都不是：








键入重要单词：三色鼠梗


在引号中加上确切的词语：“鼠梗”


在所需的所有单词之间键入或：迷你型或标准型
在你不想要的单词前加一个减号：-啮齿动物，-“杰克·拉塞尔”

您忘记关闭第一个列分区：<代码>应该是

..

然后

。小提示，不要像设置变量那样编写HTML<代码>缩小类与值之间的差距。例如：

这将使您更容易阅读标记和发现错误。也可以非常方便地发现HTML中的错误。@G-Cyrillus噢，哇！谢谢你指出这一点！谢谢。修复此错误后，三列将完全不对齐。文本和输入字段的垂直对齐方式不同。你知道什么更容易解决这个问题吗？我想复制附加的图像。也许我想的太难了？如果您能为我指引正确的方向，我将不胜感激：）。再次感谢@ArnoTenkink很棒的建议，非常感谢！我将研究validator.w3！