HTML - 引導：側邊欄推動主要內容下來

Question

目前我有這個網頁：

，因爲它顯示的圖像中，我想主要的文字標題後立即過來，但側邊欄把它推。我該如何解決這個問題？

的代碼是：

<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

電網系統被用於通過一系列 行和容納您的內容列上創建頁面佈局。使用行創建 水平組的列。

Bootstrap Grid System

你.row清除最後.row。嘗試在相同的.row內將您的內容放在您喜歡的列中。