引导h1与普通文本对齐

Question

我试图使一些正常的文本与h1文本对齐。h1附近的正常文本显示为上标。我试过垂直排列，但不起作用。

以下是它的样子：

​

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<div class="row">
  <div class="col col-md-auto">
    <h1>Some big text</h1>
  </div>
  <div class="row">
    <div class="col col-md-auto">Some normal text</div>
    <div class="col col-md-auto">Some normal text</div>
    <div class="col col-md-auto">Some normal text</div>
  </div>
</div>

​

和一个小提琴

Answer 1

使用引导班级 align-items-center垂直中心对齐文本。添加您不需要2行，单行列可以正常工作。

​

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<div class="row align-items-center">
  <div class="col col-md-auto">
    <h1>Some big text</h1>
  </div>
  <div class="col col-md-auto">Some normal text</div>
  <div class="col col-md-auto">Some normal text</div>
  <div class="col col-md-auto">Some normal text</div>
  
</div>

​

Answer 2

试试这边

    <div class="row">
      <div 
        <h1>Some big text</h1>
      </div>
      <div class="pull-left">
        <div>Some normal text</div>
        <div>Some normal text</div>
        <div>Some normal text</div>
      </div>
   </div>

Answer 3

--请试试这段代码--

<div class="row align-items-center">
      <div class="col col-md-auto">
        <h1>Some big text</h1>
      </div>
      <div class="row flex-column">
        <div class="col col-md-auto">Some normal text</div>
        <div class="col col-md-auto">Some normal text</div>
        <div class="col col-md-auto">Some normal text</div>
      </div>
    </div>