Question

我试图开始使用bootstrap并遇到网格系统问题。我遇到了这段代码，但是没有理解那些类。有人可以为我简化这个想法和解释吗？也许有一些例子：P

非常感谢〜O.K

＆＃13;

<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>

＆＃13;

Answer 1

他们有很好的文档

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

Answer 2

在网格系统中，有十二（12）列，您可以将您的行分为12个部分。

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

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

您也可以从bootstrap文档站点学习，

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>

Answer 3

每行最多可以有12列，然后才会强制下一列到下一行。所以第一行在同一行上有两列。第二行在第一行有2列，在第二行有一列。

班级名称细分： X代表应用此宽度的屏幕尺寸。 Y代表我们的12个colunms数量，这个项目的宽度将给出。因此，如果你给一个div命名为“col-12 col-md-6 col-lg-4”，这个div将占据整个行，屏幕大小为0“-medium，1/2连续中大屏幕，屏幕尺寸为大+

的1/3

Bootstrap / Grid系统？

3 个答案: