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