Question

我在将引导程序4中的元素（＃header-text-bottom和anchor）对齐时遇到问题。我在两个元素上都使用了vertical-align类，但没有任何反应。

<header>
        <nav>
            <!-- TODO - build menu -->
        </nav>

        <div id="header-top-text">
            <div class="container">
                <h3>The East side 47<br>Multifamily Portfolio</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta iure nobis nulla illum aut ut quae minima dicta, impedit dolorem, delectus quis fuga nemo reprehenderit quod est. Perspiciatis, id, tempora?</p>
            </div>
        </div>

        <div id="header-bottom-text" class="align-bottom">
            <div class="container">
                <div class="row">
                    <div class="col-sm-3">
                        <h5>$NNN</h5>
                        <p>Random Text</p>
                    </div>
                    <div class="col-sm-3">
                        <h5>$NNN</h5>
                        <p>Random Text</p>
                    </div>
                    <div class="col-sm-3">
                        <h5>$NNN</h5>
                        <p>Random Text</p>
                    </div>
                    <div class="col-sm-3">
                        <h5>$NNN</h5>
                        <p>Random Text</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="container align-bottom">
            <a href="#case-study" id="arow-white" class="btn secondaty-outline btn-sm" role="button">
                <i class="fa fa-angle-down" aria-hidden="true"></i>
            </a>
        </div>
    </header>

Answer 1

从这里的bootstrap文档中，您可能想要使用表（或带有display: table的元素）

https://v4-alpha.getbootstrap.com/utilities/vertical-align/

/*============ Header ============*/


/* Header bg picture */

table {
  background-image: url('http://arielpa.x3.rs/es47/img/home-background.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  height: 100vh;
  width: 100vw;
}


/* Menu */


/* Header Text */

#header-top-text {
  padding-top: 1.875rem;
  color: #fff;
}

#header-bottom-text {
  color: #fff;
}

#arow-white {
  color: #fff;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<table>
  <tr>
    <td id="header-top-text" class="align-top">
      <div class="container">
        <h3>The East side 47<br>Multifamily Portfolio</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta iure nobis nulla illum aut ut quae minima dicta, impedit dolorem, delectus quis fuga nemo reprehenderit quod est. Perspiciatis, id, tempora?</p>
      </div>
    </td>
    <tr>
      <td class="align-bottom" id="header-bottom-text">
        <div class="container">
          <div class="row ">
            <div class="col-sm-3">
              <h5>$NNN</h5>
              <p>Random Text</p>
            </div>
            <div class="col-sm-3">
              <h5>$NNN</h5>
              <p>Random Text</p>
            </div>
            <div class="col-sm-3">
              <h5>$NNN</h5>
              <p>Random Text</p>
            </div>
            <div class="col-sm-3">
              <h5>$NNN</h5>
              <p>Random Text</p>
            </div>
          </div>
          <a href="#case-study" id="arow-white" class="btn secondaty-outline btn-sm" role="button">
            <i class="fa fa-angle-down" aria-hidden="true"></i>
          </a>
        </div>
      </td>
    </tr>
</table>

如何在引导程序4中将一个元素对齐到底部，另一个元素对齐到顶部

1 个答案: