Heim > Artikel > Web-Frontend > Lassen Sie uns über das Rasterlayout in Bootstrap sprechen und sehen, wie man es vertikal und horizontal ausrichtet

Lassen Sie uns über das Rasterlayout in Bootstrap sprechen und sehen, wie man es vertikal und horizontal ausrichtet

青灯夜游nach vorne: 2021-11-01 11:11:502321Durchsuche

Dieser Artikel führt Sie durch das Rasterlayout in Bootstrap und wirft einen Blick auf die vertikale und horizontale Ausrichtung. Ich hoffe, er wird Ihnen hilfreich sein!

1. Bootstrap-Rasterlayout: Im vorherigen Abschnitt haben wir das Raster in Bootstrap vorgestellt. Es ist der Ausgangspunkt und die Grundlage des Webdesigns Nehmen Sie sich die Zeit, es zu verstehen, und verstehen Sie zumindest den Inhalt des Tutorials, das ich geschrieben habe, denn das, was ich geschrieben habe, ist das am häufigsten verwendete und grundlegendste. Natürlich glaube ich, dass diese Inhalte für einen Webdesigner mit einem gewissen Fundament auf einen Blick verständlich sind. Heute werden wir mehr über das Rasterlayout erfahren. [Verwandte Empfehlung: „Bootstrap-Tutorial

“]

Dieser Abschnitt betrifft einige Funktionen in der universellen flexiblen Box (Flex). 2. Vertikale Ausrichtung Tag , align-items-end kann die vertikale Ausrichtung von Zeilen im Container ändern. Die oben genannten drei Tags sind jeweils obere Ausrichtung, mittlere Ausrichtung und untere Ausrichtung. Im Folgenden finden Sie einen Democode und Renderings. Der CSS-Code im Code legt die Hintergrundfarbe und den Abstand fest, damit der Effekt einfacher angezeigt werden kann.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <style>
      .row{background-color: rgba(0, 0, 255, 0.178);height: 260px;margin:30px;}
      .col{background-color: rgba(101, 101, 161, 0.842);height: 80px;padding: 30px;margin: 10px;}
    </style>
    <title>垂直对齐演示</title>
  </head>
  <body>
        <div>

          <div class="row align-items-start">
            <div> </div>
            <div></div>
            <div></div>
          </div>

          <div class="row align-items-center">
            <div> </div>
            <div></div>
            <div></div>
          </div>

          <div class="row align-items-end">
            <div> </div>
            <div></div>
            <div></div>
          </div>

        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Lassen Sie uns über das Rasterlayout in Bootstrap sprechen und sehen, wie man es vertikal und horizontal ausrichtet

2.2 Legen Sie die vertikale Ausrichtung im Col-Tag fest

, indem Sie align-self-start, align-self-center, align- im Col-Tag hinzufügen Tag self-end kann die vertikale Ausrichtung der Spalte in der Zeile ändern. Die oben genannten drei Beschriftungen sind obere Ausrichtung, mittlere Ausrichtung und untere Ausrichtung. Im Folgenden finden Sie einen Democode und Renderings. Der CSS-Code im Code legt die Hintergrundfarbe und den Abstand fest, damit der Effekt einfacher angezeigt werden kann.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <style>
      .row{background-color: rgba(0, 0, 255, 0.178);height: 260px;margin:30px;}
      .col{background-color: rgba(101, 101, 161, 0.842);height: 80px;padding: 30px;margin: 10px;}
    </style>
    <title>垂直对齐演示</title>
  </head>
  <body>
        <div>

          <div class="row align-items-start">
            <div class="col  align-self-start"> </div>
            <div class="col align-self-center"></div>
            <div class="col align-self-end"></div>
          </div>

        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

3. Horizontale Ausrichtungalign-items-start、align-items-center、align-items-end可以更改行在容器中的垂直对齐方式，以上三个标签分别为顶部对齐、居中对齐、底部对齐。以下是一段演示代码和效果图，代码中css代码设置背景色和间距，方便查看效果。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <style>
     .row{background-color: rgba(0, 0, 255, 0.178);height: 120px;margin:10px;}
      .col-4{background-color: rgba(101, 101, 161, 0.842);height: 30px;padding: 10px;margin: 10px;}
    </style>
    <title>垂直对齐演示</title>
  </head>
  <body>
        <div>

          <div class="row justify-content-start">
            <div> </div>
            <div></div>
            <div></div>
          </div>

          <div class="row justify-content-center">
            <div> </div>
            <div></div>
            <div></div>
          </div>

          <div class="row justify-content-end">
            <div> </div>
## <div></div>
            <div></div>
          </div>

          <div class="row justify-content-around">
            <div> </div>
            <div></div>
            <div></div>
          </div>

          <div class="row justify-content-between">
            <div> </div>
            <div></div>
            <div></div>
          </div>

          <div class="row justify-content-evenly">
            <div> </div>
            <div></div>
            <div></div>
          </div>

        </div>
    </body>
</html>

Lassen Sie uns über das Rasterlayout in Bootstrap sprechen und sehen, wie man es vertikal und horizontal ausrichtet

2.2 col标签中设置垂直对齐

通过在col标签中添加align-self-start、align-self-center、align-self-end可以更改列在行中的垂直对齐方式，以上三个标签分别为顶部对齐、居中对齐、底部对齐。以下是一段演示代码和效果图，代码中css代码设置背景色和间距，方便查看效果。

rrreee

Lassen Sie uns über das Rasterlayout in Bootstrap sprechen und sehen, wie man es vertikal und horizontal ausrichtet

3、水平对齐

3.1 row标签中设置垂直对齐

通过在row标签中添加justify-content-start、justify-content-center、justify-content-end、justify-content-around、justify-content-between、justify-content-evenly

Lassen Sie uns über das Rasterlayout in Bootstrap sprechen und sehen, wie man es vertikal und horizontal ausrichtet

3.1 Legen Sie die vertikale Ausrichtung im Zeilen-Tag fest

, indem Sie justify-content-start und justify-content-center hinzufügen der Zeilen-Tag-Code>, justify-content-end, justify-content-around, justify-content-between, justify- content-evenly Sie können die horizontale Ausrichtung von Spalten in einer Zeile ändern. Im Folgenden finden Sie einen Democode und Renderings. Der CSS-Code im Code legt die Hintergrundfarbe und den Abstand fest, damit der Effekt einfacher angezeigt werden kann. 🎜rrreee🎜🎜🎜🎜Weitere Programmierkenntnisse finden Sie unter: 🎜Programmiervideo🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonLassen Sie uns über das Rasterlayout in Bootstrap sprechen und sehen, wie man es vertikal und horizontal ausrichtet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:juejin.cn. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Auf welche Dateien muss Bootstrap verweisen?Nächster Artikel：Auf welche Dateien muss Bootstrap verweisen?

In Verbindung stehende Artikel

Mehr sehen