Bootstrap - 如何在新行中设置内容

Question

我刚开始学习 Bootstrap - 我想得到这样的结果：

但不使用<br>。

目前我的代码如下所示：

HTML 文件：

<div class="container-fluid" id="home">
<div class="row">
    <div class="col-md-8">
      <div class="row">
        <div class="col-md-5"></div>
        <div class="col-md-7">
                <h1>Upper text here <br> lower text here</h1>
        </div>
      </div>
    <div class="col-md-4"></div>
  </div>
</div>
</div>

CSS 文件：

#home{
text-align: center;}

如果我将 div class="col-md-5" 更改为小于 5 或​​更高，则无济于事。

Answer 1

给你..

<div class="container-fluid" id="home">
<div class="row">
    <div class="col-md-8">
      <div class="row">
        <div class="col-md-5"></div>
        <div class="col-md-7">

        <h1>Upper text here </h1>
        <h1>lower text here </h1>


        </div>
      </div>
    <div class="col-md-4"></div>
  </div>
</div>
</div>

CSS

   #home{
    text-align: center;}

DEMO

DEMO WITH MODIFIED LINE HEIGHT