Bootstrap 4 - 在达到移动屏幕尺寸时重叠行

时间：2018-05-04 03:14:31

标签： html css twitter-bootstrap responsive-design

我当前的问题是，当屏幕缩小（响应）时，行彼此重叠。我试过添加容器但没有成功。此外，我注意到在移动屏幕尺寸时，行不会“推”下面的内容......我在这里做错了什么？

桌面和平板电脑上的一切看起来都非常好，但是一旦我达到移动屏幕尺寸，就会变得毛茸茸。

这是实时代码：Codepen - Bootstrap rows overlapping

这是我目前的HTML：

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />

<body>
  <div class="container-fluid">
    <nav class="navbar navbar-expand-md bg-light navbar-dark fixed-top">
      <a class="navbar-brand text-dark" href="#">
        <img src="img/logo-gp.png" height="40" width="40" alt="" />
      </a>
      <button class="navbar-toggler bg-dark" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
                            <span class="navbar-toggler-icon"></span>
                        </button>
      <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link text-dark" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-dark" href="#">Solutions</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-dark" href="#">Contact Us</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-dark" href="#">About Us</a>
          </li>
        </ul>
      </div>
    </nav>
    <div class="row v-align position-static">
      <div class="col-sm-6 col-md-8 fl-row">
        <div class="f-row">
          <p class="text-center txt-wrap text-light lead">A PARAGRAPH GOES HERE, I WILL FILL IT LATER ON.</p>
        </div>
      </div>
      <div class="col-sm-6 col-md-4 fl-row">
        <i id="animationItem-image--bigCloud" class="animationItem material-icons">cloud</i>
        <i id="animationItem-image--smallCloud" class="animationItem material-icons">cloud</i>
        <i id="animationItem-image--smallCloud" class="animationItem material-icons smallCloud-two">cloud</i>
      </div>
    </div>
    <div class="row  v-align">
      <div class="col-md-4 s-row s-row-box">
        <i class="fas fa-box-open fa-10x" style="color:#FFFFFF;"></i>
      </div>
      <div class="col-md-8 s-row text-center">
        <h1> Welcome to WEBSITE</h1>
        <p class="text-center txt-wrap text-light lead">ANOTHER PARAGRAPH WITH BRIEFING GOES HERE. WILL FILL IT LATER ON.</p>
        <button type="button" class="btn btn-info">Learn About Us</button>
      </div>
    </div>
    <div class="row v-align">
      <div class="col-md-12">
        <h2> Solutions</h2>
      </div>
    </div>
    <div class="row v-align text-center">
      <div class="col-md-4">
        <i class="material-icons sol-icons">cloud_done</i>
        <div class="sol-icons-cap">
          <h3>Solutions</h3>
          <p>SOLUTION DESCRIPTION GOES HERE.</p>
        </div>
      </div>
      <div class="col-md-4">
        <i class="material-icons sol-icons">wifi</i>
        <div class="sol-icons-cap">
          <h3>Solutions</h3>
          <p>SOLUTION DESCRIPTION GOES HERE.</p>
        </div>
      </div>
      <div class="col-md-4">
        <i class="material-icons sol-icons">code</i>
        <div class="sol-icons-cap">
          <h3>Solutions</h3>
          <p>SOLUTION DESCRIPTION GOES HERE.</p>
        </div>
      </div>
    </div>
    <div class="row v-align text-center">
      <div class="col-md-4">
        <i class="material-icons sol-icons">touch_app</i>
        <div class="sol-icons-cap">
          <h3>Solutions</h3>
          <p>SOLUTION DESCRIPTION GOES HERE.</p>
        </div>
      </div>
      <div class="col-md-4">
        <i class="material-icons sol-icons">security</i>
        <div class="sol-icons-cap">
          <h3>Solutions</h3>
          <p>SOLUTION DESCRIPTION GOES HERE.</p>
        </div>
      </div>
      <div class="col-md-4">
        <i class="material-icons sol-icons">local_phone</i>
        <div class="sol-icons-cap">
          <h3>Solutions</h3>
          <p>SOLUTION DESCRIPTION GOES HERE.</p>
        </div>
      </div>
    </div>
    <div class="row v-align">
      <div class="col-12">
        Animated background (xterra solution reference)
      </div>
    </div>
    <div class="row v-align2 text-light">
      <div class="col-sm-6 t-row">
        <h2>| Contact Us</h2>
        <form>
          <div class="form-group">
            <input type="text" class="form-control form-ctrl" id="formGroupExampleInput" placeholder="Name">
          </div>
          <div class="form-group">
            <input type="text" class="form-control form-ctrl" id="formGroupExampleInput2" placeholder="Email">
          </div>
          <div class="form-group">
            <input type="text" class="form-control form-ctrl" id="formGroupExampleInput2" placeholder="Message">
          </div>
          <button type="submit" class="btn btn-primary">Submit</button>
        </form>
      </div>
      <div class="col-sm-6 t-row text-light">
        <div class="contact-box">
          <i class="material-icons">local_phone</i><a href="tel:">PHONE NUMBER HERE</a><br />
          <i class="material-icons">email</i><a href="mailto:">CONTACT EMAIL HERE</a>
        </div>
      </div>
    </div>
    <div class="row v-align">
      <div class="col-sm-4 fl-row text-light">
        Services
      </div>
      <div class="col-sm-4 fl-row text-light">
        Company
      </div>
      <div class="col-sm-4 fl-row text-light">
        Address
      </div>
    </div>
  </div>


</body>

任何指导都会有所帮助！

1 个答案:

答案 0 :(得分：2)

  

将身高从position更改为vh 

%

＆＃13;
＆＃13; 
.v-align{
    height:30%;
}
＆＃13; 
@import url('https://fonts.googleapis.com/css?family=Maven+Pro|Roboto');
body {
  background-color: ;
  padding-top: 70px;
}

#full-h {
  height: 100%;
  width: 100%;
}

.txt-wrap {
  word-wrap: break-word;
}

.v-align {
  height: 30%;
}

.v-align2 {
  height: 40%;
}

.fl-row {
  background-color: #314d74;
}

.f-row {
  margin-top: 6vh;
  width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.s-row {
  background-color: #b3bdc7;
}

.s-row-box {
  padding: 5vh;
  text-align: center;
}

.t-row {
  background-color: #697fa4;
}

h1 {
  color: #FFE082;
  text-align: center;
  margin-top: 2vh;
}

h2 {
  border-left: 4px solid #FFB300;
}

.sol-icons {
  font-size: 72px;
}

.sol-icons-cap {
  width: 300px;
  margin-left: auto;
  margin-right: auto;
}

.form-ctrl {
  display: block;
  margin-top: 5vh;
  width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.contact.s-row-box {
  display: block;
  margin-top: 5vh;
  width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.contact-ctrl {
  display: block;
  margin-top: 5vh;
  width: 400px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 576px) {
  /* ... */
}

@media (min-width: 768px) {
  /* ... */
}


/****** Canvas Animation ******/


/***** Animation CSS Code *****/

.project-title--container,
.project-link--container {
  width: 100%;
  text-align: center;
}

.project-title,
.project-link {
  color: #fff;
  font-weight: bold;
  text-transform: uppercase;
}

.project-title {
  font-size: 18px;
  margin-top: 10px;
}

.project-link,
.project-link a {
  color: #fff;
  font-size: 14px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.fa {
  font-size: 22px !important;
  padding: 0 5px;
  color: #fff;
}

.container-animation--flexbox {
  height: 100%;
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
}

.animationItem {
  position: absolute;
  margin-right: 35px;
}

#animationItem-image--bigCloud {
  animation: bobble 2s infinite;
  margin-top: 3vh;
  margin-left: 12vh;
  font-size: 170px;
  color: #7ec0ee;
}

#animationItem-image--smallCloud {
  animation: bobble 4s infinite;
  margin-top: 12vh;
  margin-left: 20vh;
  font-size: 145px;
  color: #e9e9e9;
}

.smallCloud-two {
  margin-bottom: 5px;
  margin-right: 320px;
  font-size: 145px;
  z-index: -1;
  color: #d9d9d9 !important;
  animation: bobble 2.5s infinite !important;
}

@keyframes bobble {
  0% {
    transform: translate3d(0px, -25px, 0px);
    animation-timing-function: ease-in;
  }
  50% {
    transform: translate3d(0px, -35px, 0px);
    animation-timing-function: ease-out;
  }
  100% {
    transform: translate3d(0px, -25px, 0px);
  }
}
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题