Question

我想在同一行显示图片和标题内容，但它会出现在不同的行中。

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-sm-12" align="center">
      <img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678110-sign-info-128.png" height="40px" width="40px" />
      <h3 align="center">Water Quality :<span id="headerValue"> Good</span></h3>
    </div>
  </div>
</div>

＆＃13;

Answer 1

如果你不想添加css，你可以简单地将图像放在h3中

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-sm-12" align="center">
      <h3 align="center"><img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678110-sign-info-128.png" height="40px" width="40px" /> Water Quality :<span id="headerValue"> Good</span></h3>
    </div>
  </div>
</div>

＆＃13;

Answer 2

这里是：

HTML：将.my-header类或其他内容添加到col-sm-12元素

<div class="container">
     <div class="row">
        <div class="col-sm-12 my-header" align="center">
             <img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678110-sign-info-128.png" height="40px" width="40px" />
             <h3 align="center">Water Quality  :<span id="headerValue"> Good</span></h3>
        </div>
     </div>
</div>

CSS：

.my-header > img,
.my-header > h3{
  display: inline-block
}

图像标记和标题内容在html中不在同一行

2 个答案: