无法内联 bootstrap 中的元素

Question

我希望一些元素在一行中，这是我的 html 代码：

h2 {
  color: Red;
  font-size: 30px;
  font-weight: bold;
  display: inline-block;
}

img {
  display: inline-block;
}

h2.class1 {
  color: green;
  font-size: 20px;
  display: inline-block;
}

h2.class2 {
  color: yellow;
  font-size: 14px;
  display: inline-block;
}

.bg {
  background-color: black;
}

<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet">

</html>

<!-- Code -->
<div class="bg">
  <div class="container-sm center" style="margin-top: 25px;">
    <div class="d-grid gap-2 col-6 mx-auto">
      <img src="https://via.placeholder.com/50" width="50px" height="50px" style="border-radius:25px;">
      <h2 style="font-size: 25px;">Some Heading Text</h2>
      <h2 class="class1">{}></h2>
      <h2 class="class2"> Some Tagline Like Text</h2>
      <hr>
    </div>
  </div>
</div>

结果输出如下： .

此外，这是我希望它看起来像的样子（这是在删除 bootstrap 之后）：

编辑：我尝试过的事情：-

d-内联块
内联块
浮动属性
边距试验
一些 Bootstrap 类（抱歉我忘记了）
我从 Whosebug 得到的代码块

Answer 1

试试下面的代码我对你的标记做了一些大的改动 Css

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <style>
      *{
        margin: 0;
        padding: 0;
      }
      h2 {
        color: Red;
        font-size: 30px;
        font-weight: bold;
        
      }

     
      h2.class1 {
        color: green;
        font-size: 20px;
        
      }

      h2.class2 {
        color: yellow;
        font-size: 14px;
        
      }

      .bg {
        background-color: black;
      }
    </style>
  </head>

  <body>
    <div class="d-flex flex-row justify-content-start bg-dark">
      <img
        src="https://via.placeholder.com/50"
        width="50px"
        height="50px"
        style="border-radius: 25px"
      />
      <div class="d-flex align-items-baseline my-4">
        <h2 style="font-size: 25px">Some Heading Text</h2>
        <h2 class="class1">{}></h2>
        <h2 class="class2">Some Tagline Like Text</h2>
      </div>
    </div>
  
  </body>
</html>

Answer 2

use d-inline-flex instead d-grid

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>



</html>

<!-- Code -->
<div class="bg">
  <div class="container-sm center" style="margin-top: 25px;">
    <div class="d-inline-flex col-12 ">
      <img  src="https://via.placeholder.com/50" width="50px" height="50px" style="border-radius:25px;">
      <h2  style="font-size: 25px;">Some Heading Text</h2>
      <h2 class="class1">{}></h2>
      <h2 class="class2"> Some Tagline Like Text</h2>
      <hr>
    </div>
  </div>
</div>
</body>
</html>

无法内联 bootstrap 中的元素

Unable to inline elements in bootstrap

html

css

inline

twitter-bootstrap

bootstrap-5