使用 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">