html - 为什么 col-md-3 将图像堆叠成一列

问题描述

我想知道如何将图像放入水平行而不是列中。它适用于代码的“服务”部分。我正在关注这个视频，它在屏幕上显示所有代码..但我仍然无法弄清楚。这是视频的 URL，代码在https://youtu.be/99vHH_6F0Ko?t=3064的 51:00 分钟

/*---------Services---------*/
#services {
  background-image: linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8)),url(images/services.jpg);
  background-size: cover;
  background-position: center;
  color: #efefef !important;
  background-attachment: fixed;
  padding-top: 50px;
  padding-bottom: 50px;
}

#services h1 {
  text-align: center;
  color: #efefef !important;
  padding-bottom: 10px;
}

#services h1::after {
  content: '';
  background: #efefef;
  display: block;
  height: 3px;
  width: 170px;
  margin: 20px auto 5px;

}
.services {

  margin-top: 40px;
}

.icon {
  font-size: 40px;
  margin: 20px auto;
  padding: 10px;
  height: 80px;
  width: 80px;
  border: 1px solid #efefef;
  border-radius: 50%;

}

#services p {
  font-size: 14px;
  margin-top: 20px;
  color: #ccc;

}

.services .col-md-3:hover {
  background: #007bff;
  cursor: pointer;
  transition: 0.7s;
}
/*------------TEAM MEMBERS----------*/
#team {
  padding-top: 50px;
  padding-bottom: 50px;
  color: #555;
}

h1 {
  text-align: center;
  color: #555 !important;
  padding-bottom: 10px;
}

h1::after {
  content: '';
  background: #007bff;
  display: block;
  height: 3px;
  width: 170px;
  margin: 20px auto 5px;

}
.profile-pic {
  margin-top: 25px;
}

.profile-pic .img-box {
  opacity: 1;
  display: block;
  position: relative;
  }

  .profile-pic .img-box img {
    filter: grayscale(1);
  }

  .profile-pic .img-box img:hover {
    filter: grayscale(0);
    cursor: pointer;

  }

 .profile-pic h2 {
   font-size: 22px;
   font-weight: bold;
   margin-top: 15px;
   color: #007bff !important;
 }

 .profile-pic h3 {
   font-size: 15px;
   font-weight: bold;
   margin-top: 15px;

 }

 #team .fa {
  height: 25px;
  width: 25px;
  color: #007bff !important;
  background: #fff;
  padding: 4px;
  border-radius: 50%;

}

.img-box ul {
  padding: 15px 0;
   position: absolute;
   z-index: 2;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
   top: 220px;
   opacity: 0;

}

.img-box ul li {
  padding: 5px;
  display: inline-block;

}

.img-box:hover ul {
  opacity: 1;
}

.img-box ul, .img-box ul li {
  transition: 0.5s;
}

<!DOCTYPE html>
<html>
 <head>
<title>Business Website</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font- 
   awesome.min.css"

  script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"> 
</script>
</script><script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js"> 
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js"></script>
</head>
<!-- -Services- -->
<section id="services">
<div class="container">
<h1>Our Services</h1>
<div class="row services">
  <div class="col-md-3 text-center">
    <div class="icon">
      <i class="fa fa-desktop"></i>
    </div>
    <h3>Web Development</h3>
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="col-md-3 text-center">
    <div class="icon">
      <i class="fa fa-paint-brush"></i>
    </div>
    <h3>Graphic Design</h3>
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="col-md-3 text-center">
    <div class="icon">
      <i class="fa fa-line-chart"></i>
    </div>
    <h3>Digital Marketing</h3>
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="col-md-3 text-center">
    <div class="icon">
      <i class="fa fa-shopping-bag"></i>
    </div>
    <h3>E-Commerce</h3>
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
 </div>
 </div>
 </section>
 <!---Team Members- -->
 <section id="team">
  <div class="container">
    <h1>Our Team</h1>
    <div class="row">
      <div class="col-md-3 profile-pic text-center">
        <div class="img-box">
          <img src="images/teampic.png" class="img-fluid">
          <ul>
  <a href="#"><li<i class="fa fa-facebook"></i></li></a>
  <a href="#"><li<i class="fa fa-twitter"></i></li></a>
  <a href="#"><li<i class="fa fa-linkedin"></i></li></a>
 </ul>
            <div>
              <h2>Elon Musk</h2>
              <h3>Founder/CEO</h3>
              <p>Lorem ipsum dolor sit amet,
            consectetur adipisicing elit.</p>
          </div>
          <div class="col-md-3 profile-pic text-center">
            <div class="img-box">
              <img src="images/team2.jpg" class="img-fluid">
              <ul>
      <li><a href="#"><i class="fa fa-facebook"></i></a></li>
      <li><a href="#"><i class="fa fa-twitter"></i></a></li>
      <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
    </ul>
                <div>
                  <h2>Elon Musk</h2>
                  <h3>Founder/CEO</h3>
                  <p>Lorem ipsum dolor sit amet,
                consectetur adipisicing elit.</p>
              </div>
        </div>
    </div>
  </div>
</div>
</section>
</body>
</html>

<body>

标签： htmlcss

解决方案

这是您的 HTML 标记中的错误。

您已将第二个配置文件 div 放在第一个配置文件 div 中，即嵌套 div。

所以它也在第二个配置文件 div 上应用它的样式。

只需删除该 div 并将其放在第一个配置文件 div 之外。如下所示。

#services {
  background-image: linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8)),url(images/services.jpg);
  background-size: cover;
  background-position: center;
  color: #efefef !important;
  background-attachment: fixed;
  padding-top: 50px;
  padding-bottom: 50px;
}

#services h1 {
  text-align: center;
  color: #efefef !important;
  padding-bottom: 10px;
}

#services h1::after {
  content: '';
  background: #efefef;
  display: block;
  height: 3px;
  width: 170px;
  margin: 20px auto 5px;

}
.services {

  margin-top: 40px;
}

.icon {
  font-size: 40px;
  margin: 20px auto;
  padding: 10px;
  height: 80px;
  width: 80px;
  border: 1px solid #efefef;
  border-radius: 50%;

}

#services p {
  font-size: 14px;
  margin-top: 20px;
  color: #ccc;

}

.services .col-md-3:hover {
  background: #007bff;
  cursor: pointer;
  transition: 0.7s;
}
/*------------TEAM MEMBERS----------*/
#team {
  padding-top: 50px;
  padding-bottom: 50px;
  color: #555;
}

h1 {
  text-align: center;
  color: #555 !important;
  padding-bottom: 10px;
}

h1::after {
  content: '';
  background: #007bff;
  display: block;
  height: 3px;
  width: 170px;
  margin: 20px auto 5px;

}
.profile-pic {
  margin-top: 25px;
}

.profile-pic .img-box {
  opacity: 1;
  display: block;
  position: relative;
  }

  .profile-pic .img-box img {
    filter: grayscale(1);
  }

  .profile-pic .img-box img:hover {
    filter: grayscale(0);
    cursor: pointer;

  }

 .profile-pic h2 {
   font-size: 22px;
   font-weight: bold;
   margin-top: 15px;
   color: #007bff !important;
 }

 .profile-pic h3 {
   font-size: 15px;
   font-weight: bold;
   margin-top: 15px;

 }

 #team .fa {
  height: 25px;
  width: 25px;
  color: #007bff !important;
  background: #fff;
  padding: 4px;
  border-radius: 50%;

}

.img-box ul {
  padding: 15px 0;
   position: absolute;
   z-index: 2;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
   top: 220px;
   opacity: 0;

}

.img-box ul li {
  padding: 5px;
  display: inline-block;

}

.img-box:hover ul {
  opacity: 1;
}

.img-box ul, .img-box ul li {
  transition: 0.5s;
}

<section id="team">
  <div class="container">
    <h1>Our Team</h1>
    <div class="row">
    <!-- First profile div 33% width -->
      <div class="col-md-3 profile-pic text-center"> 
        <div class="img-box">
          <img src="images/teampic.png" class="img-fluid">
          <ul>
  <a href="#"><li<i class="fa fa-facebook"></i></li></a>
  <a href="#"><li<i class="fa fa-twitter"></i></li></a>
  <a href="#"><li<i class="fa fa-linkedin"></i></li></a>
 </ul>
            <div>
              <h2>Elon Musk</h2>
              <h3>Founder/CEO</h3>
              <p>Lorem ipsum dolor sit amet,
            consectetur adipisicing elit.</p>
          </div>
          
  </div>
</div>

<!-- Second profile div 33% width -->
<div class="col-md-3 profile-pic text-center"> 
    <div class="img-box">
      <img src="images/team2.jpg" class="img-fluid">
      <ul>
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
        <div>
          <h2>Elon Musk</h2>
          <h3>Founder/CEO</h3>
          <p>Lorem ipsum dolor sit amet,
        consectetur adipisicing elit.</p>
      </div>
</div>
</div>
</section>

html - 为什么 col-md-3 将图像堆叠成一列

问题描述

解决方案

推荐阅读