1. 首页
  2. 问题列表
  3. Bootstrap 4导航栏与苹果移动设备上的内容重叠
提问者：小点点

Bootstrap 4导航栏与苹果移动设备上的内容重叠


我有一个bootstrap 4网站(https://sedomadrid2021.com)，它有一个导航栏，这个导航栏在苹果移动设备上有一个奇怪的问题:在主页上，导航栏似乎无法将所有内容下推，一些菜单与下面的内容重叠，在“ponentes”页面上，内容就是无法下推。

这是我的主页HTML:

<body>
<div class="outer">
<nav class="navegacion navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="https://sedomadrid2021.com">
    <img src="/img/logo.png" alt="logo" height="110px">
    </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mx-auto">
      <li class="nav-item active mr-5 ml-5">
        <a class="nav-link btnreg" href="https://sedomadrid2021.com">Inicio <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item mr-5 ml-5">
        <a class="nav-link btnreg" href="https://sedomadrid2021.com/ponentes">Ponentes<span class="sr-only"></span></a>
      </li>
      <li class="nav-item mr-5 ml-5">
        <a class="nav-link btnreg" href="https://sedomadrid2021.com/CartaSEDO.pdf">Inf&oacute;rmate</a>
      </li>
      <li class="nav-item mr-5 ml-5">
        <a class="nav-link btninscrib" href="https://atlanta.eventszone.net/myCongress/form.php?thisFormCongress=sedo21&thisFormLanguage=es">Inscr&iacute;bete</a>
      </li>
    </ul>
  </div>
</nav>
<div class="contenedor-principal">
    <div class="contenedor-texto-principal">
        <span class="texto-titulo-principal">
            ¿Te lo vas<br>a perder?<br>
        </span>
        <span class="texto-parrafo-principal">
            <br>El 67º congreso de la sedo 2021 en Madrid congregará a los mejores profesionales de la ortodoncia de España en un evento de reencuentro cooperación y conocimiento
        </span>
    </div>
<div class="contenedor-bocadillo">
    <img class="fondo-bocadillo" src="/img/bocadillo.png" alt="fondo-texto">
    <span class="texto-bocadillo">Que no te<br>lo cuenten</span>
</div>
</div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>

这是我的“Ponentes”页面html:

<body>
<div class="outer">
<nav class="navegacion navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="https://sedomadrid2021.com">
    <img src="/img/logo.png" alt="logo" height="110px">
    </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mx-auto">
      <li class="nav-item mr-5 ml-5">
        <a class="nav-link btnreg" href="https://sedomadrid2021.com">Inicio <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item active mr-5 ml-5">
        <a class="nav-link btnreg" href="https://sedomadrid2021.com/ponentes">Ponentes<span class="sr-only"></span></a>
      </li>
      <li class="nav-item mr-5 ml-5">
        <a class="nav-link btnreg" href="https://sedomadrid2021.com/CartaSEDO.pdf">Inf&oacute;rmate</a>
      </li>
      <li class="nav-item mr-5 ml-5">
        <a class="nav-link btninscrib" href="https://atlanta.eventszone.net/myCongress/form.php?thisFormCongress=sedo21&thisFormLanguage=es">Inscr&iacute;bete</a>
      </li>
    </ul>
  </div>
</nav>
<div class="contenedor-ponentes">
    <div class="titulo-precongreso">
    <h2>Precongreso</h2>
    </div>
    <div class="row">
    <div class="col-sm-6">
        <img class="imgponente" src="/img/ponentes/pre-ewaczochrowska.jpg" alt="Ewa Czochrowska">
        <h4>Ewa Czochrowska</h4>
    </div>
    <div class="col-sm-6">
        <img class="imgponente" src="/img/ponentes/pre-rafiromano.jpeg" alt="Rafi Romano">
        <h4>Rafi Romano</h4>
    </div>
    </div>
    <div class="titulo-congreso">
    <h2>Congreso</h2>
    </div>
    <div class="row fila1congreso">
    <div class="col-sm-4">
        <img class="imgponente-cong" src="/img/ponentes/wassimbouzid.jpeg" alt="Wassim Bouzid">
        <h4>Wassim Bouzid</h4>
    </div>
    <div class="col-sm-4">
        <img class="imgponente-cong" src="/img/ponentes/luiscarriere.jpeg" alt="Luis Carriere">
        <h4>Luis Carriere</h4>
    </div>
    <div class="col-sm-4">
        <img class="imgponente-cong" src="/img/ponentes/tommasocastroflorio.jpeg" alt="Tomasso Castroflorio">
        <h4>Tomasso Castroflorio</h4>
    </div>
    </div>
    <div class="row fila2congreso">
    <div class="col-sm-4">
        <img class="imgponente-cong" src="/img/ponentes/alvaroferrando.jpeg" alt="Alvaro Ferrando">
        <h4>Álvaro Ferrando</h4>
    </div>
    <div class="col-sm-4">
        <img class="imgponente-cong" src="/img/ponentes/raulferrando.jpeg" alt="Raul Ferrando">
        <h4>Raúl Ferrando</h4>
    </div>
    <div class="col-sm-4">
        <img class="imgponente-cong" src="/img/ponentes/alejandroramirez.jpeg" alt="Alejandro Ramirez">
        <h4>Alejandro Ramírez</h4>
    </div>
    </div>
    <div class="row fila2congreso">
    <div class="col-sm-4">
        <img class="imgponente-cong" src="/img/ponentes/pabloramirez.jpeg" alt="Pablo Ramirez">
        <h4>Pablo Ramirez</h4>
    </div>
    <div class="col-sm-4">
        <img class="imgponente-cong" src="/img/ponentes/jeanlouisraymond.jpeg" alt="Jean Louis Raymond">
        <h4>Jean Louis Raymond</h4>
    </div>
    <div class="col-sm-4">
        <img class="imgponente-cong" src="/img/ponentes/arturovela.jpeg" alt="Arturo Vela">
        <h4>Arturo Vela</h4>
    </div>
    </div>
</div>
</div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>

这是我的CSS

@font-face {
  font-family: "Rotunda-Regular";
  src: url(fonts/RotundaRegular.otf) format("opentype");
}

@font-face {
  font-family: Rotunda-ExtraBoldItalic;
  src: url(fonts/RotundaExtraBoldItalic.otf) format("opentype");
}

@font-face {
  font-family: Rotunda-Light;
  src: url(fonts/RotundaLight.otf) format("opentype");
}

body{
    background-color: #fff;
}

.outer{
  display: flex;
  flex-flow: column;
  height: 100%;
}

.navegacion{
    margin-right: 8%;
    margin-left: 8%;
    margin-top: 4%;
    background-color: #fff !important;
}

.navegacion li{
    font-family: "Rotunda-Regular";
    text-transform: uppercase;
    color: #141b4d;
    font-size: 1.35em;
}

.contenedor-principal{
    flex-grow : 1;
    background-image: url(/img/fondo-lg.png);
    background-size: cover;
    background-repeat: no-repeat;
}

.contenedor-texto-principal{
    position: absolute;
    left: 8%;
    width: 20%;
    top: 30%;
}

.texto-titulo-principal{
    font-family: "Rotunda-ExtraBoldItalic";
    font-size: 3em;
    line-height: 1.25em;
    color: #f2827f;
}

.texto-parrafo-principal{
    font-family: "Rotunda-Light";
    font-size: 1.25em;
    color: #666666;
}

.fondo-bocadillo{
    position: absolute;
    z-index: 10001;
    height: 250px;
}

.contenedor-bocadillo{
    width: 20%;
    position: absolute;
    z-index: 10000;
    left: 70%;
    top: 65%;
}

.texto-bocadillo{
    padding-left: 4%;
    padding-top: 20%;
    position: absolute;
    color: #ffc845;
    font-family: "Rotunda-ExtraBoldItalic";
    font-size: 3em;
    text-align: center;
    z-index: 10002;
}


.btninscrib{
    font-family: "Rotunda-ExtraBoldItalic";
    color: #f2827f !important;
    background-color: #7248bd;
    border-radius: 15px;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 30px !important;;
    padding-right: 30px !important;
}

.btnreg{
    padding-top: 20px !important;
}


.contenedor-ponentes{
    margin-right: 7%;
    margin-left: 7%;
    margin-bottom: 5%; 
    
    text-align: center;
}

.imgponente{
    width: 55%;
}

.titulo-precongreso{
    color: #f2827f;
    font-family: "Rotunda-ExtraBoldItalic";
    padding-top: 2%;
    padding-bottom: 3%;
}

.titulo-precongreso h2{
    font-size: 3em !important;  
}

.titulo-congreso{
    color: #34a798;
    font-family: "Rotunda-ExtraBoldItalic";
    padding-top: 6%;
    padding-bottom: 2%;
}

.titulo-congreso h2{
    font-size: 3em !important;  
}

.imgponente-cong{
    width: 60%;
}

.fila2congreso{
    padding-top: 5%;
}

.contenedor-ponentes h4{
    font-family: "Rotunda-Regular";
    padding-top: 5%;
}

@media (min-width: 320px) and (max-width: 768px) {
    .contenedor-ponentes{
        position: relative;
    }
    
    .contenedor-principal{
        background-image: url(/img/fondo-sm.png);
        background-size: cover;
    }
    
    .contenedor-texto-principal{
        position:relative;
        width: 80%;
        left: 8%;
        top: 20%;   
    }
    
    .contenedor-bocadillo{
        width: 80%;
        left: 3%;
        top: 120%;
    }
    
    .fondo-bocadillo{
        height: 250px;
    }
}

正如我提到的，这个问题只发生在苹果移动设备上。 在安卓手机，windows台式机和苹果台式机上，一切看起来都很好。 这是一个非常简单的网页，如果你想复制这个问题，你可以直接浏览和访问这个网站。


共2个答案

匿名用户

在深入研究之前，请快速回复:在使用最新Firefox的Windows10上，只需调整浏览器窗口的大小，就会出现这个问题。 因此，这不仅仅是苹果手机的问题。

可能的修复:

所以我可以看到，您在主页面上大量使用position:absolute。 这似乎正在打破下拉菜单（有很好的理由）。 也许把它们改成别的，因为绝对就是它说的:绝对。 这意味着它会呆在原地，不管周围发生什么。

匿名用户

解决方案:这个问题是因为我把导航栏放在“外部”div里面，这是一个flex div。

相关问题



热门标签
Java JavaScript Python PHP C# Android Html jQuery C++ Css IOS MySQL NodeJS