Wie richte ich div mit Bootstrap nach unten in div aus?

Question 1

html, body, .sidebar-container, .sidebar-row {
    height: 100%;
}

.sidebar {
    background-color: #2C3544;
}

@media (min-width: 992px) {
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1000;
        display: block;
        background-color: #2C3544;
    }
}
img{
    margin: auto;
    display: block;
}
.sidebar-image{
    margin-top: 15px;
}
.sidebar-items{
    margin-top: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid sidebar-container">
    <div class="row sidebar-row">
        <div class="col-md-2 sidebar">
            <div class="container-fluid">
                <div class="col-md-12 sidebar-image">
                    <img src="assets/logo-white.png" width="75px" height="75px"/>
                </div>
            </div>
            <div class="row sidebar-items">
                <div class="col-md-12">
                    <ul class="list-group">
                        <li class="list-group-item">Dashboard</li>
                        <li class="list-group-item">Projects</li>
                        <li class="list-group-item">Statistics</li>
                    </ul>
                </div>
            </div>
            <div class="row align-bottom">
                hafldjalfjsdlfsjdlfsjlfs
            </div>
        </div>
        <div class="col-md-10 offset-md-2 content">
            Main Content
        </div>
    </div>
</div>

Ich habe diesen HTML/CSS-Code geschrieben, um ein div innerhalb eines anderen div nach unten auszurichten:

Ich möchte dieses letzte div in der ausrichten col-md-2 auf den Grund der sidebar-container welche Höhe 100% ist. Ich habe versucht, die Bootstrap-Klasse hinzuzufügen align-bottom aber irgendwie geht das nicht. Könnte mir jemand weiterhelfen?

Question 2

Angenommen, Sie haben 2 Divs. Div A (außen) und Div B (innen). Um Ihre Aufgabe zu erfüllen, platzieren Sie einfach Div B-Code in Div A-Code und fügen Sie dies in der Div B-CSS-Klasse hinzu

position : absolute
bottom   : 0

Question 3

Sie können dazu auch einfach die Bootstrap-Flexbox verwenden.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<div class="d-flex align-items-start flex-column bg-success" style="height: 200px;">
  <div class="mb-auto p-2">Flex item-1</div>
  <div class="p-2">Flex item-2</div>
  <div class="p-2">Flex item-3</div>
</div>

<div class="d-flex align-items-end flex-column bg-info" style="height: 200px;">
  <div class="p-2">Flex item-a</div>
  <div class="p-2">Flex item-b</div>
  <div class="mt-auto p-2">Flex item-c</div>
</div>

Elemente links oder rechts ausrichten Stellen Sie sicher, dass Sie das gesamte enthalten d-flex align-items-end flex-column auf dem übergeordneten Element und wählen Sie Start oder Ende, je nachdem, ob es links oder rechts ausgerichtet werden soll.

Element nach unten ausrichten Dann benutze mt-auto auf dem div, das Sie an der Unterseite des Elternteils halten möchten.

Question 4

Bei der Verwendung des Bootstrap-Grid-Systems sieht meine Lösung wie folgt aus:

hinzufügen d-flex zu jedem col-*
hinzufügen d-flex flex-column zu jedem card-body

hinzufügen mt-auto mx-auto bis zum letzten Element (oder last div von Elementen) Ich möchte bis zum Ende bleiben

Dies verhindert meiner Meinung nach weitere Styling-Durcheinander.

Question 5

Relevante Dokumentation:

Flex-Ausrichtung in Bootstrap 5.0: https://getbootstrap.com/docs/5.0/utilities/flex/#align-items

Vertikale Ausrichtung in Bootstrap 5.0: https://getbootstrap.com/docs/5.0/utilities/vertical-align/

Relevanter Code:
Was für mich funktioniert hat, um ein div (aus Text) am unteren Rand einer Zeile/eines Containers auszurichten

<div class="d-flex align-content-end flex-wrap mb-2">
    <span class="display-4 fw-bold text-black text-start mt-0 mb-0">Active Mural Projects</span>
</div>