html - Bootstrap 4 - 达到移动屏幕大小时行重叠

标签 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>

任何指导都会有所帮助!

最佳答案

Change height from vh to %

.v-align{
    height:30%;
}


@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);
  }
}
<!DOCTYPE html>
<html>

<head>
  <title>Network Technology</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, maximum-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script>
  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="css/style.css" />
  <script src="js/script.js"></script>

</head>

<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="" /> TEST WEB
      </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--smallCloud1" 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>


</html>

关于html - Bootstrap 4 - 达到移动屏幕大小时行重叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50166603/

上一篇：html - flexbox 容器不会拉伸(stretch) 100% 高度

下一篇：html - Bootstrap 4 的 Select2 样式错误

相关文章：

css - FAB 按钮动画无法正常工作

html - 将多个嵌套的 DIV 在正文标签中居中 HTML CSS

php - 在 CodeIgniter 中错误之前加载 div css 样式

javascript - 更改类 javascript 中每个元素的文本

html - HTML 中伪 3D 的数学帮助

jquery - 样式化水平下拉菜单

html - 为多个标签指定相同的 CSS 类

javascript - 当我裁剪照片时，它们最终将标题隐藏在缩略图中

html - 每页固定页脚，数据不与页脚重叠

html - IE7 中的 z-index 问题

©2024 IT工具网  联系我们