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

网格系统用于通过一系列创建页面布局容纳内容的行和列。使用行创建水平组列。

<强> Bootstrap Grid System

您的.row会清除上一个.row。尝试将您的内容放在同一.row。

中您想要的列中

Answer 2

<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>

HTML - Bootstrap：侧边栏按下主要内容

2 个答案: