当我调整浏览器大小时,为什么我的列会垂直重叠?

时间:2018-06-01 14:37:59

标签: resize bootstrap-4 overlap

我正在练习自助式响应式网页开发,当我更改宽度时,我设法使我的网页响应相当,但如果我垂直调整大小,我的中间列会重叠。这是代码:

<div class="container-fluid con">
        <div class="row">
          <div class="col-md-2 d-none d-md-block col1">
         </div>
          <div class="col-md-6 col2">  
            <p id="header-p">Full stack developer specialising in responsive website design and smooth user experience. Practical experience in project management, branding strategy, and creative direction; devoted to functional programming and information architecture</p>
            <hr id="hr1">
            <p id="header-tag">Web Developer - User Experience Designer - Graphic Artist
            </p>
          </div>
               <div class="col-md-2 pic-col">
            <img class="img-responsive rounded-circle img-thumbnail" src="#">
            </div>
          <div class="col-md-2 d-none d-md-block col1">
          </div>
        </div>
      </div>
    <div class="container-fluid con2">
      <div class="row">
        <div class="col-md-2 d-none d-md-block col1"></div>
        <div class="col-md-8 port-col"><h2 id="portfolio-header">Portfolio</h2>
          <hr id="hr2">
        </div>
        <div class="col-md-2 d-none d-md-block col1">     
        </div>
      </div>
    </div>

CSS:

#header-p{
  margin-top: 10%;
  text-align: center;
  color: white;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:20px;
}
  #header-tag{
  padding-top: 1rem;
  text-align: center;
  color: white;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:20px;
}
.con{
  margin: 4rem auto 2rem auto;
}
.col1, .col3{
  border: 1px solid #bfbfbf;
  background-color: #bfbfbf;
  height: 100vh;
}
.col2{
  background-color: #cccccc;
  height: 60vh;
}
.pic-col{
  background-color: #cccccc;
  height: 60vh;
}
#portfolio-header{
  text-align: center;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 60px;
  letter-spacing: 5px;
  /*line-height: 90px;*/
  max-width: 100%;
  color: #b3b3b3;
}
.port-col{
  max-height: 100vh;
}
.con2{
  margin: 2rem auto 2rem auto;!important
}

如果我遗漏了https://codepen.io/Seaplush/pen/rKVLmX

,那么完整的代码就在这里

0 个答案:

没有答案