时间戳

首页 > 解决方案 > Bootstrap 4 容器 d-flex 重叠

html - Bootstrap 4 容器 d-flex 重叠

问题描述

我正在使用Bootstrap 4开发我的作品集，但我在作品部分遇到了问题。以手机尺寸进行测试时，工作部分与接触部分重叠。

什么原因？解决方案是什么？我知道这与 Bootstrap 的 flex 行为有关，但我已经完成了研究，并不能完全找到问题所在。

提前致谢。

/*
     * Pablo Herrero's portfolio | Made with love by Pablo Herrero | pabloherrero.me
     * Copyright 2020 Pablo Herrero | MIT License
     */


/* Fonts */

@font-face {
  font-family: 'fira_coderegular';
  src: url('fonts/firacode-regular-webfont.woff2') format('woff2'), url('fonts/firacode-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'fira_codebold';
  src: url('fonts/firacode-bold-webfont.woff2') format('woff2'), url('fonts/firacode-bold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'fira_codemedium';
  src: url('fonts/firacode-medium-webfont.woff2') format('woff2'), url('fonts/firacode-medium-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}


/* General */

body {
  position: relative;
  font-family: 'fira_coderegular';
  letter-spacing: normal;
  overflow-y: scroll;
  background-color: #ffffff;
}

body::-webkit-scrollbar {
  display: none;
}


/* Navbar */

#navbar {
  min-height: 56px;
  background-color: transparent;
  border-bottom: none;
}

#navbar .navbar-toggler {
  color: #000000;
}

#navbar .navbar-toggler:focus {
  outline: none;
}

#h {
  font-size: 28px;
  font-family: 'fira_codebold';
  text-align: center;
  color: #000000;
  outline: none;
}

#navbar .nav-link {
  font-size: 14px;
  font-family: 'fira_codemedium';
  padding: 1rem 1.5rem;
  text-align: center;
  color: #ffffff;
  background-color: #000000;
  outline: none;
}

#navbar .nav-link:hover {
  color: #bd93f9;
  outline: none;
}

#navbar .nav-link.active {
  color: #50fa7b;
  outline: none;
}

#navbar #h:hover {
  color: #bd93f9;
  outline: none;
}

#navbar #h:active {
  color: #50fa7b;
  outline: none;
}

@media (min-width: 992px) {
  #h {
    font-size: 32px;
  }
  #navbar .nav-link {
    font-size: 16px;
    padding: 0.5rem 0rem 0.5rem 3rem;
    color: #000000;
    background-color: transparent;
  }
}


/* Header */

#header {
  width: 100%;
  height: 100vh;
}

#header .container {
  min-height: 100%;
  min-height: 100vh;
  align-items: center;
}

#header .col-sm-12 {
  text-align: center;
}

#header #headerPhoto {
  text-align: center;
  max-width: 100%;
}

#header h1 {
  margin: 50px 0px 0px 0px;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  font-family: 'fira_codebold';
  font-size: 64px;
  line-height: 3.3rem;
  letter-spacing: 0.05rem;
}

#header h2 {
  margin: 15px 0px 0px 0px;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  font-family: 'fira_codemedium';
  font-size: 32px;
  letter-spacing: 0.05rem;
}

@media (min-width: 992px) {
  #header #headerPhoto {
    max-width: 35%;
  }
  #header h1 {
    margin: 25px 0px 0px 0px;
    font-size: 72px;
    line-height: 3.3rem;
    letter-spacing: 0.05rem;
  }
  #header h2 {
    margin: 15px 0px 0px 0px;
    font-size: 36px;
    letter-spacing: 0.05rem;
  }
}


/* About */

#about {
  width: 100%;
  height: 100vh;
}

#about .container {
  min-height: 100%;
  min-height: 100vh;
  align-items: center;
}

#about .row {
  background-color: #000000;
  padding: 5vh 0vh 5vh 0vh;
  margin: 1vh 0vh 1vh 0vh;
}

#about h2 {
  width: 100%;
  text-align: left;
  margin-bottom: 30px;
  font-family: 'fira_codemedium';
  font-size: 32px;
  color: #ffffff;
  letter-spacing: 0.05rem;
}

#about p {
  width: 100%;
  text-align: left;
  font-family: 'fira_coderegular';
  font-size: 16px;
  color: #ffffff;
}

@media (min-width: 992px) {
  #about .row {
    background-color: #000000;
    padding: 15vh 10vh 15vh 10vh;
    margin: 1vh 0vh 1vh 0vh;
  }
  #about h2 {
    text-align: left;
    margin-bottom: 30px;
    font-size: 36px;
  }
  #about p {
    text-align: left;
    font-size: 18px;
  }
}


/* Works */

#works {
  width: 100%;
  height: 100vh;
}

#works .container {
  min-height: 100%;
  min-height: 100vh;
  align-items: center;
}

#works .col-sm-4 {
  height: 35vh;
  background-color: #000000;
  border: 3vh solid white;
}

#works h2 {
  width: 100%;
  text-align: center;
  margin-bottom: 30px;
  font-family: 'fira_codemedium';
  font-size: 32px;
  color: #000000;
  letter-spacing: 0.05rem;
}

#works h3 {
  width: 100%;
  padding-top: 10px;
  text-align: left;
  font-family: 'fira_codemedium';
  font-size: 26px;
  color: #ffffff;
  letter-spacing: 0.05rem;
}

#works p {
  text-align: left;
  font-family: 'fira_coderegular';
  font-size: 16px;
  color: #ffffff;
}

#works .col-sm-4 i {
  font-size: 16px;
  color: #ffffff;
}

#works hr {
  border-color: #ffffff;
}

#works a,
#works a i {
  color: #000000;
  text-decoration: unset;
}

#works h3:hover {
  color: #bd93f9;
}

#works h3:active {
  color: #50fa7b;
  outline: none;
}

#works a:hover {
  color: #bd93f9;
}

#works a:active {
  color: #50fa7b;
  outline: none;
}

@media (min-width: 992px) {
  #works h2 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 36px;
  }
  #works h3 {
    text-align: left;
    font-size: 30px;
  }
  #works p {
    text-align: left;
    font-size: 18px;
  }
  #works i {
    font-size: 18px;
  }
}


/* Contact */

#contact {
  width: 100%;
  height: 100vh;
}

#contact .container {
  min-height: 100%;
  min-height: 100vh;
}

#contact h2 {
  width: 100%;
  text-align: center;
  margin-bottom: 30px;
  font-family: 'fira_codemedium';
  font-size: 32px;
  color: #000000;
  letter-spacing: 0.05rem;
}

#contactForm input,
#contactForm textarea,
#contactForm button {
  background-color: #000000;
  border-radius: 0%;
}

#contactForm input::placeholder,
#contactForm textarea::placeholder,
#contactForm button {
  color: white;
  font-size: 16px;
}

#contactForm button:hover {
  color: #bd93f9;
}

#contactForm button:active {
  color: #50fa7b;
  outline: none;
}

@media (min-width: 992px) {
  #contact h2 {
    font-size: 36px;
  }
  #contactForm input::placeholder,
  #contactForm textarea::placeholder,
  #contactForm button {
    color: white;
    font-size: 18px;
  }
}


/* Footer */

#footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  padding-bottom: 5px;
  background-color: transparent;
  color: #000000;
  text-align: center;
}

#footer #social a {
  font-size: 14px;
  color: #000000;
}

#footer #social i:hover {
  color: #bd93f9;
}

#footer #social i:active {
  color: #50fa7b;
  outline: none;
}

#footer small {
  font-size: 14px;
}

@media (min-width: 992px) {
  #footer #copy {
    float: left;
  }
  #footer #social a {
    font-size: 21px;
    float: right;
    padding: 0.5rem 0rem 0.5rem 2.5rem;
  }
  #footer small {
    font-size: 16px;
  }
}
<!DOCTYPE html>
<html lang="en">
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="I'm a developer. Here I show my evolution, my work and my passion.">
  <meta name="author" content="Pablo Herrero">

  <title>Pablo Herrero | Developer | pabloherrero.me</title>

  <!-- Bootstrap style sheet -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">

  <!-- Custom styles -->
  <link rel="stylesheet" href="css/style.css">

  <!-- Touch icons -->

</head>

<body id="top">

  <!-- Navbar -->
  <nav id="navbar" class="navbar navbar-expand-lg navbar-light fixed-top">
    <a class="navbar-brand" href="#top">
      <div id="h" class="align-self-center">H</div>
    </a>
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                    <i class="fas fa-bars"></i>
                </button>
    <div id="navbarResponsive" class="collapse navbar-collapse">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="#about">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#works">Works</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#contact">Contact</a>
        </li>
      </ul>
    </div>
  </nav>

  <!-- Header -->
  <header id="header">
    <div class="container d-flex flex-column justify-content-center align-items-center">
      <div class="row align-items-center">
        <div class="col-sm-12">
          <img src="img/pabloHerrero.jpg" alt="Pablo Herrero" id="headerPhoto">
        </div>
        <div class="col-sm-12">
          <h1>Pablo Herrero</h1>
        </div>
        <div class="col-sm-12">
          <h2>lore ipsum</h2>
        </div>
      </div>
    </div>
  </header>

  <!-- About -->
  <section id="about">
    <div class="container d-flex flex-column justify-content-center align-items-center">
      <div class="row">
        <div class="col-sm-12 align-self-center">
          <h2>Hi! I'm a developer.</h2>
        </div>
        <div class="col-sm-12 align-self-center">
          <p>I learned to code in 2019 when I started my studies on development. I'm confortable using Java, SQL, HTML5, CSS3, Bootstrap 4 and GIT, although I'm always digging deep and learning new things. I'm currently working on JDBC, Swing, Android Studio,
            JavaScript and Python, and will start soon with TypeScript, Node.js and Angular. Here you can take a look at my projects and drop me a line with the contact form if you wish.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Works -->
  <section id="works">
    <div class="container d-flex flex-column justify-content-center">
      <div>
        <h2>Works</h2>
      </div>
      <div class="row">
        <div class="col-sm-4 align-self-center">
          <a href="http://" target="_blank">
            <h3>Addicted Dev Bot</h3>
            <hr>
            <div>
              <i class="fab fa-js"></i>
              <i class="fab fa-node"></i>
            </div>
            <p>Node.js Twitter bot.</p>
          </a>
        </div>
        <div class="col-sm-4 align-self-center">
          <a href="http://" target="_blank">
            <h3>Addicted Dev Bot</h3>
            <hr>
            <div>
              <i class="fab fa-js"></i>
              <i class="fab fa-node"></i>
            </div>
            <p>Node.js Twitter bot.</p>
          </a>
        </div>
        <div class="col-sm-4 align-self-center">
          <a href="http://" target="_blank">
            <h3>Addicted Dev Bot</h3>
            <hr>
            <div>
              <i class="fab fa-js"></i>
              <i class="fab fa-node"></i>
            </div>
            <p>Node.js Twitter bot.</p>
          </a>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-4 align-self-center">
          <a href="http://" target="_blank">
            <h3>Addicted Dev Bot</h3>
            <hr>
            <div>
              <i class="fab fa-js"></i>
              <i class="fab fa-node"></i>
            </div>
            <p>Node.js Twitter bot.</p>
          </a>
        </div>
        <div class="col-sm-4 align-self-center">
          <a href="http://" target="_blank">
            <h3>Addicted Dev Bot</h3>
            <hr>
            <div>
              <i class="fab fa-js"></i>
              <i class="fab fa-node"></i>
            </div>
            <p>Node.js Twitter bot.</p>
          </a>
        </div>
        <div class="col-sm-4 align-self-center">
          <a href="http://" target="_blank">
            <h3>Addicted Dev Bot</h3>
            <hr>
            <div>
              <i class="fab fa-js"></i>
              <i class="fab fa-node"></i>
            </div>
            <p>Node.js Twitter bot.</p>
          </a>
        </div>
      </div>
      <div>
        <a href="http://" target="_blank">More on my GitHub <i class="fab fa-github"></i></a>
      </div>
    </div>
  </section>

  <!-- Contact -->
  <section id="contact">
    <div class="container d-flex flex-column justify-content-center">
      <div>
        <h2>Contact</h2>
      </div>
      <form id="contactForm" action="https://getsimpleform.com/messages?form_api_token=82ef8c01a157ab94e750cd5fa275f2ce" method="post" class="form" role="form" autocomplete="off">
        <div class="form-group">
          <input type="text" class="form-control" id="formName" aria-describedby="name" placeholder="Name" required="">
        </div>
        <div class="form-group">
          <input type="email" class="form-control" id="formMail" aria-describedby="email" placeholder="Email" required="">
        </div>
        <div class="form-group">
          <textarea class="form-control" id="formText" rows="10" placeholder="Your message" required=""></textarea>
        </div>
        <button type="submit" class="btn float-left">Submit</button>
      </form>
    </div>
  </section>

  <!-- Footer -->
  <footer id="footer">
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-12 col-md-6 col-lg-6 align-self-center">
          <small id="copy">&copy; 2020 Pablo Herrero</small>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-6 align-self-center">
          <div id="social">
            <a href="https://twitter.com/pablohs1986" target="_blank"><i class="fab fa-twitter"></i></a>
            <a href="https://dev.to/pablohs1986" target="_blank"><i class="fab fa-dev"></i></a>
            <a href="https://es.stackoverflow.com/users/149406/pablohs1986?tab=profile" target="_blank"><i class="fab fa-stack-overflow"></i></a>
            <a href="https://github.com/pablohs1986" target="_blank"><i class="fab fa-github"></i></a>
            <a href="https://www.linkedin.com/in/pabloherrero1986/" target="_blank"><i class="fab fa-linkedin"></i></a>
          </div>
        </div>
      </div>
    </div>
  </footer>

  <!-- Font Awesome -->
  <script src="https://kit.fontawesome.com/121886ca53.js" crossorigin="anonymous"></script>

  <!-- jQuery -->
  <script src="node_modules/jquery/dist/jquery.min.js"></script>

  <!-- Popper.js -->
  <script src="node_modules/@popperjs/core/dist/umd/popper.min.js"></script>

  <!-- Bootstrap js -->
  <script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

  <!-- Own script -->
  <script src="js/app.js"></script>
</body>

</html>

标签： htmlcsswebbootstrap-4

解决方案

将高度<section id="works">从“height:100vh”更改为“min-height:100vh”

原因：

工作部分的高度固定为 100vh，而在移动视图中，所有框都处于垂直方向并且高度超过了 100vh。结果它也占用了下一节的空间。

推荐阅读