Bootstrap 网格系统实例：堆叠的水平

版权声明：转载请注明出处！ https://blog.csdn.net/weixin_34727238/article/details/83112248

做项目的时候遇到 <div class="col-md-6">这句，由于基础较差，一时间还没有想到，进行搜索之后明白一二，写博客记录一下。

跟着官方来看一个带有简单布局的网格实例：包含两个列，每个列包含两个段落。（在这里，为每个列分别定义了样式，实际上可以避免这么做。）

菜鸟官方链接

细节

• <div class="container">...</div> 元素被添加，确保居中和最大宽度。
• 一旦添加了容器，接下来您需要考虑以行为单位。添加 <div class="row">...</div>，并在行内添加列 <div class="col-md-6"></div>。
• 网格中的每一行是由 12 个单元组成的，您可以使用这些单元定义列的尺寸。在我们的实例中，有两个列，每个列由 6 个单元组成，即 6+6=12。

可以尝试其他更多的选项，比如 <div class="col-md-3"></div> 和 <div class="col-md-9"></div> 或 <div class="col-md-7"></div> 和 <div class="col-md-5"></div>。

可以尝试一下，但要确保总和总是 12。