引导/网格系统？答案

【问题标题】：Bootstrap / Grid system?引导/网格系统？
【发布时间】：2018-05-05 18:17:55
【问题描述】：

我尝试从引导程序开始并遇到网格系统问题。我遇到了这段代码，但不理解这些类。有人可以为我简化背后的想法和解释吗？也许有一些例子：P

非常喜欢 ~好吧

<div class="container">
  <!-- Start of the first row -->
  <div class="row">
    <div class="col-md-6">
      <p> Row 1, Cols 1-6 </p>
    </div>
    <div class="col-md-6">
      <p> Row 1, Cols 7-12 </p>
    </div>
  </div>
  <!-- Start of the second row -->
  <div class="row">
    <div class="col-md-5">
      <p> Row 2, Cols 1-5 </p> 
    </div>
    <div class="col-md-5">
      <p> Row 2, Cols 6-10 </p>
    </div>
    <div class="col-md-5">
      <p> Row 2, Cols 1-5 </p>
    </div>
  </div>
</div>

【问题讨论】：

标签： html css gridview bootstrap-4

【解决方案1】：

他们有很好的文档

https://getbootstrap.com/docs/4.0/layout/grid/

【讨论】：

能否请您关闭此问题（将其设置为已回答），这样就不会浪费时间尝试检查它。谢谢！

【解决方案2】：

在网格系统中，有十二 (12) 列，您可以将行分成 12 部分。

在您的代码中，您将第二行分为 15 个部分而不是 12 个部分。

您可以从这个网站了解更多信息，https://www.w3schools.com/bootstrap4/bootstrap_grid_system.asp

你也可以从引导文档站点学习，

https://getbootstrap.com/docs/4.0/layout/grid/

<div class="container">
  <!-- Start of the first row -->
  <div class="row">
    <div class="col-md-6">
      <p> Row 1, Cols 1-6 </p>
    </div>
    <div class="col-md-6">
      <p> Row 1, Cols 7-12 </p>
    </div>
  </div>
  <!-- Start of the second row -->
  <div class="row">
    <div class="col-md-4">
      <p> Row 2, Cols 1-5 </p> 
    </div>
    <div class="col-md-4">
      <p> Row 2, Cols 6-10 </p>
    </div>
    <div class="col-md-4">
      <p> Row 2, Cols 1-5 </p>
    </div>
  </div>
</div>

【讨论】：

【解决方案3】：

在将下一列强制到下一行之前，每行最多可以有 12 列。所以第一行在同一行上有两列。第二行第一行有 2 列，第二行有 1 列。

类名分解： X 代表应用此宽度的屏幕尺寸。 Y 代表我们的 12 列的数量，该项目将为其宽度给出。因此，如果您给一个 div 的类名“col-12 col-md-6 col-lg-4”，这个 div 将占据整个行，屏幕大小为 0"-medium，占一行的 1/2中大屏，大屏+ 1/3行

【讨论】：