HTML - Bootstrap: Sidebar Hauptinhalt nach unten drückt

Question

Zur Zeit habe ich diese Webseite:

, wie es im Bild zeigt, mag ich den Haupttext direkt nach der Überschrift kommen, aber die Seitenleiste drückt es nach unten . Wie kann ich dieses Problem beheben?

Der Code ist:

<div class="row content-area-main"> 
      <div class="col-md-4"> 
       <img src="img/double-lily-modified3.png" alt="LilyPond logo"> 
      </div> 
      <div class="col-md-5 header-info"> 
       <h1 class="header-info-title">LilyPond</h1> 
       <p>... music notation for everyone</p> 
      </div> 
      <div class="col-md-3"> 
       <div class="card card-block"> 
        <h4 class="card-title">Stable Release</h4> 
        <ul class="list-group list-group-flush"> 
        <li class="list-group-item"><a href="#" target="_blank">Download 2.18.2</a></li> 
        <li class="list-group-item"><a href="#" target="_blank">Manuals 2.18.2</a></li> 
        </ul> 
       </div> 
       <div class="card card-block"> 
        <h4 class="card-title">Unstable Release</h4> 
        <ul class="list-group list-group-flush"> 
        <li class="list-group-item"><a href="#" target="_blank">Download 2.19.51</a></li> 
        <li class="list-group-item"><a href="#" target="_blank">Manuals 2.19.51</a></li> 
        </ul> 
       </div> 
       <div class="card card-block"> 
        <h4 class="card-title">Pondings</h4> 
        <p>The LilyPond Blog is up and running <a href="http://www.lilypondblog.org/" target="_blank">here</a>! Anyone can follow and leave comments on the blog. To contribute, contact <a href="mailto:ul@openlilylib.org">Urs Liska</a>.</p> 
       </div> 
      </div> 
     </div> 
     <div class="row content-area-main"> 
      <div class="col-md-8"> 
       <p>LilyPond is a music engraving program, devoted to producing the highest-quality sheet music possible. It brings the aesthetics of traditionally engraved music to computer printouts. LilyPond is free software and part of the GNU Project.</p> 
       <p class="header-info-link">Read more in our <a href="#">Introduction</a>!</p> 
      </div> 
     </div> 
     <div class="row content-area"> 
      <div class="col-md-8"> 
       <div class="card card-block"> 
        <h4 class="card-title">Beatuiful Sheet Music</h4> 
        <img src="img/bwv861-lilypond.png" class="img-fluid img-thumbnail card-image-custom" width="100%"> 
        <p class="card-text">LilyPond is a powerful and flexible tool for engraving tasks of all kinds, for example classical music (like the example above by J.S. Bach), complex notation, early music, modern music, tablature, vocal music, lead sheets, educational materials, large orchestral projects, customized output, and even Schenker graphs.</p> 
        <span class="card-link">Browse our gallery of <a href="#">Examples</a> and be inspired!</span> 
       </div> 
      </div> 
     </div> 

Answer 1

<div class="row content-area-main"> 
    <div class="col-md-8"> 
     <div class="row"> 
      <div class="col-md-6"> 
       <img src="img/double-lily-modified3.png" alt="LilyPond logo"> 
      </div> 
      <div class="col-md-6 header-info"> 
       <h1 class="header-info-title">LilyPond</h1> 
       <p>... music notation for everyone</p> 
      </div> 
     </div> 
     <div class="row content-area-main"> 
      <div class="col-md-12"> 
       <p>LilyPond is a music engraving program, devoted to producing the highest-quality sheet music possible. It brings the aesthetics of traditionally engraved music to computer printouts. LilyPond is free software and part of the GNU Project.</p> 
       <p class="header-info-link">Read more in our <a href="#">Introduction</a>!</p> 
      </div> 
     </div> 
     <div class="row content-area"> 
      <div class="col-md-12"> 
       <div class="card card-block"> 
        <h4 class="card-title">Beatuiful Sheet Music</h4> 
        <img src="img/bwv861-lilypond.png" class="img-fluid img-thumbnail card-image-custom" width="100%"> 
        <p class="card-text">LilyPond is a powerful and flexible tool for engraving tasks of all kinds, for example classical music (like the example above by J.S. Bach), complex notation, early music, modern music, tablature, vocal music, lead sheets, educational materials, large orchestral projects, customized output, and even Schenker graphs.</p> 
        <span class="card-link">Browse our gallery of <a href="#">Examples</a> and be inspired!</span> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="col-md-3"> 
     <div class="card card-block"> 
      <h4 class="card-title">Stable Release</h4> 
      <ul class="list-group list-group-flush"> 
      <li class="list-group-item"><a href="#" target="_blank">Download 2.18.2</a></li> 
      <li class="list-group-item"><a href="#" target="_blank">Manuals 2.18.2</a></li> 
      </ul> 
     </div> 
     <div class="card card-block"> 
      <h4 class="card-title">Unstable Release</h4> 
      <ul class="list-group list-group-flush"> 
      <li class="list-group-item"><a href="#" target="_blank">Download 2.19.51</a></li> 
      <li class="list-group-item"><a href="#" target="_blank">Manuals 2.19.51</a></li> 
      </ul> 
     </div> 
     <div class="card card-block"> 
      <h4 class="card-title">Pondings</h4> 
      <p>The LilyPond Blog is up and running <a href="http://www.lilypondblog.org/" target="_blank">here</a>! Anyone can follow and leave comments on the blog. To contribute, contact <a href="mailto:ul@openlilylib.org">Urs Liska</a>.</p> 
     </div> 
    </div> 
</div> 

Answer 2

Grid-Systeme verwendet werden, für die Erstellung von Seitenlayouts durch eine Reihe von Zeilen und Spalten, die Ihre Inhalte aufnehmen. Verwenden Sie Zeilen, um horizontale Gruppen von Spalten zu erstellen.

Bootstrap Grid System

Ihre .row löscht das letzte .row. Versuchen Sie, Ihren Inhalt in der Spalte zu platzieren, in der Sie ihn haben möchten .row.