En segundo lugar, un vistazo rápido al marco web BootStrap4: diseño de BootStrap4

disposición

Diseño de cuadrícula de columna

método de diseño

• .containerTamaño fijo; .container-fluidancho completo.
• Cada fila se divide en 12 partes por defecto, por ejemplo col-sm-4, 4 partes, es decir, 1/3.
• Se puede .w-100envolver

  <div class="container">
      <div class="row">
          <div class="col-sm-4">第一列</div>
          <div class="col-sm-4">第二列</div>
          <div class="col-sm-4">第三列</div>
      </div>
  </div>
  <div class="container-fluid">
      <div class="row">
          <div class="col-sm-2">第一列</div>
          <div class="col-sm-5">第二列</div>
          <div class="col-sm-3">第三列</div>
      </div>
  </div>
  

método de alineación

• Posicionamiento horizontal

• justify-content-center, justify-content-end

• justify-content-around, justify-content-between

• posicionamiento vertical

• .align-items-center, .align-items-end

• .align-self-center, .align-self-end

• para ordenar.order-3

Disposición elástica flexible

método de diseño

• .d-flex flex-row-reversediseño horizontal, luego invierta
• .d-flex flex-columndisposición vertical

método de alineación

• .justify-content-centerEl contenido del elemento secundario está centrado horizontalmente (inicio, final, entre, alrededor)

• .align-content-centerEl contenido del elemento secundario está centrado verticalmente (inicio, final, entre, alrededor)

• .align-items-centerLos elementos de elementos secundarios están centrados verticalmente (inicio, final, línea de base, extensión)

• .align-self-centerEl elemento único está centrado verticalmente (inicio, final, línea de base, extensión)

• .flex-fillLos subcuadros se rellenan con el resto

• .flex-grow-*0 o 1, ya sea para llenar el resto

• .flex-shrink-*0 o 1, si forzar una nueva línea

• .mr-auto .ml-autoAlineación flotante de elementos flexibles en disposición horizontal

• .mb-auto .mt-autoAlineación flotante de elementos flexibles en disposición vertical

• .flex-wrapConfigure el paquete, el contenido se ajustará automáticamente

• .flex-wrap-reversecontrarrestar

• .order-*orden especificado