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>

还有一个fiddle

Answer 1

使用引导程序class align-items-center垂直居中对齐文本。添加您不需要两行，单行和列可以正常工作。

<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

“行”之后可以写“ flex-column”）

Answer 4

请尝试使用此代码

$(".sub-menu-link").click(() => $(this).toggleClass("active-menu-link").next(".sub-menu-link").slideToggle(100));

引导H1和常规文本对齐

4 个答案: