Бутстрап / Грид система?

Question

Я пытаюсь начать с начальной загрузки и испытываю проблемы с сеткой. я наткнулся на этот блок кода, но не понимаю эти классы. Может ли кто-нибудь упростить идею и объяснение этого для меня? может быть, с некоторыми примерами: P

ты очень ~ O.K

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

Answer 1

В грид-системе имеется двенадцать (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>

Answer 2

каждая строка может иметь максимум 12 столбцов, прежде чем она приведет следующий столбец к следующей строке. Таким образом, первая строка имеет два столбца на одной строке. Второй ряд имеет 2 столбца в первой строке и один столбец во второй строке.

разбивка имен классов: X обозначает размер экрана, к которому применяется эта ширина. Y обозначает количество столбцов в нашем 12, этот пункт будет дан для его ширины. Таким образом, если вы дадите одному div-элементу имена классов «col-12 col-md-6 col-lg-4», этот div будет занимать всю строку с размером экрана 0 "-медиум, 1/2 строки на средний и большой экран и 1/3 ряда при большом размере экрана +

Answer 3

У них довольно хорошая документация

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