Fatal编程技术网
  • html/
  • Html 为什么移动设备上的引导div之间存在间隙，而桌面上没有？

Html 为什么移动设备上的引导div之间存在间隙，而桌面上没有？

html css twitter-bootstrap

Html 为什么移动设备上的引导div之间存在间隙，而桌面上没有？,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我正在使用bootstrap来模拟我发现的一个网站，它大部分都在工作，除了这个我似乎无法解决的奇怪问题。在桌面上，容器之间没有间隙，一切正常。然而，在移动设备上，我的两个容器之间有一个间隙。我附上了一张图片来展示这一点——当我缩小浏览器窗口时，左边的一张在手机上，右边的一张在桌面上 目前，我唯一能摆脱它的方法是将第一个div的大小缩小到90vh，但我希望它是100vh，所以它最初会填满整个屏幕。我在下面附上我的HTML和CSS-提前感谢您的帮助 HTML: 任何帮助都将不胜感激。如果您可以将问

我正在使用bootstrap来模拟我发现的一个网站，它大部分都在工作，除了这个我似乎无法解决的奇怪问题。在桌面上，容器之间没有间隙，一切正常。然而，在移动设备上，我的两个容器之间有一个间隙。我附上了一张图片来展示这一点——当我缩小浏览器窗口时，左边的一张在手机上，右边的一张在桌面上

目前，我唯一能摆脱它的方法是将第一个div的大小缩小到90vh，但我希望它是100vh，所以它最初会填满整个屏幕。我在下面附上我的HTML和CSS-提前感谢您的帮助

HTML:

任何帮助都将不胜感激。

如果您可以将问题转换为使用Stackoverflow的snippet功能，并且如果您从与您的页面大小相同的服务中添加临时图像，则可以查看您的页面发生了什么，这将有助于查看您正在尝试执行的操作。 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.80.0">
    <title>Rêver</title>

    

    <!-- Bootstrap core CSS -->
<link href="./bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="./style.css">
</head>
<body class="body">
<div class="container" style="height: 100vh">
  <div class="navbar navbarSmall" style="width: 100vw; max-width: 100%; z-index: 50;">
    <div class="container menu">
      <h1 class="text-white logo" style="font-size:5vh">Rêver</h1>
      <div class="hamburger">
        <div class="line line1"></div>
        <div class="line line2"></div>
        <div class="line line3"></div>
      </div>
    </div>
  </div>
  <div class="container bg-house-main">
    <img src="./hero1.jpg" alt="" style="z-index: -50">
    <h1 class="slogan">Dare to Dream</h1>
  </div>
</div>
<div class="container navMenu hidden" style="height: 100vh; position: absolute; bottom: 100vh;">
  <div class="navbar text-center">
    <ul class="nav flex-column">
      <li class="nav-item">
        <a class="nav-link" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</div>

<div class="container content-section-1 text-light">
  <div class="content1 mt-5 mb-5">
    <div class="imgText mb-3">
      <h1 style="font-family: 'Montserrat';" class="text-center mt-5 mb-5">The Height Of Luxury</h1>
      <p>Rêver is a magnificent project of 2 luxury villas located in the popular district of Chêne-Bougeries. This promotion offers a unique living environment in the countryside while being very close to downtown Geneva and diverse amenities.</p>
    </div>
    <div id="carouselExampleControls" class="carousel slide imageSlider" data-ride="carousel">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img class="d-block w-100" src="./pexels-max-vakhtbovych-6436744.jpg" alt="First slide">
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" src="./pexels-max-vakhtbovych-6436746.jpg" alt="Second slide">
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" src="./pexels-max-vakhtbovych-6436752.jpg" alt="Third slide">
        </div>
      </div>
      <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      </a>
      <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
      </a>
    </div>
  </div>
</div>
<div class="container content-section-2 text-light">
  <table class="table tableInformation mb-5">
    <tbody>
      <tr>
        <td class="cellText" valign="bottom">
          <div class="text">
            <small>/ district</small>
            <h4>Chêne-Bougeries</h4>
          </div>
        </td>
        <td class="cellText">
          <div class="text" >
            <small>/ instagram</small>
            <a href="https://www.instagram.com/rousseau5_realestate/"><h4>@rousseau5_realestate</h4></a>
          </div>
        </td>
        <td class="cellText">
          <div class="text">
            <small>/ gallery</small>
            <a href="#"><h4>Gallery</h4></a>
          </div>
        </td>
      </tr>
      <tr>
        <td class="cellText">
          <div class="text">
            <small>/ surface plan</small>
            <a href="#"><h4>Download PDF</h4></a>
          </div>
        </td>
        <td class="cellText">
          <div class="text">
            <small>/ sales brochure</small>
            <a href="#"><h4>Download PDF</h4></a>
          </div>
        </td>
        <td class="cellText">
          <div class="text">
            <small>/ contact</small>
            <a href="#"><h4>Contact us</h4></a>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<div class="container content-section-3">
  <img src="./Buclines Animation--JGw5BkP9dQ.gif" alt="" class="tourGIF mb-5">
</div>
<div class="container content-section-4">
  <div class="content4">
    <h1 class="headingSection4">
THE
SPACE
DESIGNED
<span style="color: #B7A187;">WITH
PASSION
      </span>
        </h1>
        <p class="descriptionSection4">
The architect must interpret and transcribe the strong interaction that exists between a project and the natural harmony of a place.
    
This is how Neal Ymar and his architects conceive it;
"We seek to create a feeling of well-being, in each space, by seeking a symbiosis between the individual, his place of life and his natural environment. This coexistence is the keystone of an architectural project ”.
  
Each of the details as well as the finishes have been thought out with particular care. The contemporary architecture combines quality finishes and materials.
        </p>
  </div>
</div>
<script src="./jquery.js"></script>
<script src="./popper.js"></script>
<script src="./bootstrap.js"></script>
<script src="./app.js"></script>

    
  </body>
</html>

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700;900&display=swap');

@font-face {
    font-family: 'DreamFont';
    src: url('./Aguila-Thin.ttf')
}
@font-face {
    font-family: 'LogoFont';
    src: url('./Locomotype\ GigaSansBold.ttf');
}

@font-face{
    font-family: 'AppleFont';
    src: url('./FontsFree-Net-SFProDisplay-Regular.ttf')
}

.slogan {
    font-family: 'DreamFont';
    font-size: 8vh; 
    max-width: 100vw;
    color: white;
    line-height: 100vh;
    text-align: center;
    white-space: none;
}

@media screen and (max-width: 1573px){
    .slogan {
        font-size: 10vw;
    }
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'AppleFont';
}

.bg-house-main {
    width: 100vw;
    height: 100vh;
}

body.x {
    overflow: hidden;
}

.bg-house-main img{
    filter: brightness(0.85);
    bottom: 0;
    height: 100%;
    left: 0;
    object-fit: cover;
    object-position: center;
    position: absolute;
    right: 0;
    top: 0;
    width: 100vw;
    max-width: 100%;
}

.container {
    width: 100vw;
    max-width: 100%;
    display: flex;
    flex-direction: column;
}

.navMenu {
    background-color: black;
    height: 100vh;
    display: flex;
    align-items: center;
    color: white;
    justify-content: center;
}

.navMenu a {
    font-family: 'LogoFont';
    color: white;
    margin-top: 5vh;
    font-size: 3vh;
    transition: transform 0.3s ease;
}

.navMenu a:hover {
    transform: scale(1.2);
    text-decoration: underline;
}

.navMenu.moving {
    transition: all 1s ease-in-out;
};

.line {
    transition: all 1s ease-in-out;
}

.line1.x {
    transform: translateY(2.5vh) rotate(135deg);
}

.line2.x {
    opacity: 0;
    transition: opacity 1s ease-out;
}

.line3.x {
    transform: translateX(0.11vw) translateY(-0.5vh) rotate(-135deg);
}

.line2 {
    opacity: 1;
    transition: opacity 1s ease-in;
}

.imgText {
    font-size: 1.5vw;
    max-width: 35vw;
    margin-right: 5vw;
}

.imgText h1 {
    font-size: 2vw;
}

.line1.moving, .line3.moving {
    transition: transform 1s ease;
}

.logo {
    font-family: 'LogoFont';
    cursor: pointer;
}

.hamburger {
    cursor: pointer;
}

.imageSlider {
    max-width: 40vw;
}

.menu {
    margin-top: 3vh;
    width: 100vw;
    max-width: 100%;
}

.line {
    height: calc(1.5vh/3);
    width: calc((2vh/3)*6);
    border-radius: 10px;
    background-color: white;
    margin-top: 1vh;
}

.content-section-1 {
    align-items: center;
    width: 100vw;
    z-index: 10;
    position: relative;
    background: #070707;
}

.content-section-4 {
    align-items: center;
    width: 100vw;
    min-height: 50vh;
    position: relative;
    background: #070707;
}

.content4 {
    display: flex;
    white-space: pre-wrap;
    font-family: 'DreamFont';
    color: white;
    flex-direction: row;
    align-items: center;
    width: 80vw;
    justify-content: flex-start;
}

.content4 span {
    font-family: 'DreamFont';
}

.headingSection4 {
    font-size: 5vw;
    margin-right: 5vw;
}

.descriptionSection4 {
    max-width: 40vw;
    font-size: 1vw;
}

@media screen and (max-width:1742px) {
    .descriptionSection4 {
        font-size: 1.5vw;
    }
}

.content1 {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 80vw;
    justify-content: space-evenly;
}
.content1 {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 80vw;
    justify-content: space-evenly;
}

.content-section-1 h1 {
    display: flex;
    width: 80vw;
    align-self: center;
}

.content-section-2 {
    position: relative;
    display: flex;
    align-items: center;
    background: #070707;
}

.content-section-3 {
    position: relative;
    display: flex;
    align-items: flex-end;
    background: #070707;
}

.tableInformation {
    width: 81vw;
}


@media screen and (max-width: 881px) {
    table,
    tr,
    td {
      display: block;
    }
    body .tableInformation td {
        width: 80vw;
        display:flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
    }
    .content-section-4 {
        align-items: center;
    }
    .descriptionSection4 {
        max-width: 90vw;
        white-space: pre-wrap;
        font-size: 2.5vw;
    }
    .headingSection4 { 
        max-width: 90vw;
        font-size: 7vw;
        text-align: center;
    }
    .content1 {
        flex-direction: column;
    }
    .imgText {
        max-width: 80vw;
        font-size: 3vw;
        margin-right: 0;
    }
    .imgText h1 {
        font-size: 3.5vw;
    }
    .imageSlider {
        max-width: 80vw;
    }
    .content4 {
        flex-direction: column;
        white-space: normal;
    }
}

body, html {
    max-width: 100vw;
}

.tableInformation td {
    color: white;
    min-height: 30vw;
    width: calc(100% / 3);
    border: 1px solid #222222;
} 

.text {
    margin-left: 5%;
    line-height: 5vh;
}

.text a {
    text-decoration:none;
}

.tourGIF {
    width: 89vw;
}