php - 使用 Bootstrap 创建带有 3 个图像的横幅标题

Question

我正在尝试为我正在为大学元素设计的页面制作标题。

我一直在尝试不同的代码，我能处理的最好的是 3 张图像，一张在另一张下面。在我的生活中，我无法看到如何将它们并排放置在横幅中，然后适合屏幕的长度。

标题代码:

    <header>
      <div class="container-fluid">
       <div class="row">
        <div class="col-md-4">
            <div class="span4">
            <img class="img-responsive" src="https://i.ibb.co/7vJj2z4/logo-small.png" alt="img">
        </div>
        </div>
             <div class="col-md-4">
                 <div class="span4">
            <img class="img-responsive" src="https://i.ibb.co/Mf8HmH7/Jedi-Mind-Reader-Logo-Small.png" alt="img">
        </div>
             </div>
            <div class="col-md-4">
                <div class="span4">
            <img class="img-responsive" src="https://i.ibb.co/7vJj2z4/logo-small.png" alt="img">
        </div>
            </div>

    </div>
</div>
</div>
</header>

样式代码

* {box-sizing: border-box;}

body {
  margin: 0;
  font-family: Orbitron, sans-serif;
}

.header, .footer {
  overflow: hidden;
  background-color: black;

}

.footer {
   color: white;
}

.header {
  color: yellow;
}

.header, .footer a {
  float: left;
  text-align: center;
  text-decoration: none;
  font-size: 18px;
  line-height: 25px;
  border-radius: 4px;
}

.header, .footer a.logo {
  font-size: 25px;
  font-weight: bold;
}

.header, .footer a:hover {
  background-color: black;
  color: yellow;
}

.header, .footer a.active {
  background-color: black;
  color: black;
}

.header-right, .footer-right {
  float: right;
}

@media screen and (max-width: 500px) {
  .header, .footer a {
    float: none;
    display: block;
    text-align: center;
  }

  .header-right, .footer-right {
    float: none;
  }
}

Answer 1

您正在尝试将样式应用于不存在的类。你可以调用header {}但如果你使用 .header {}那么你需要改变<header> => <header class="header">