body{
padding: 13%;
}
#mimenu{
padding-right: 15%;
padding-top: 5%;
background-color: white;
}
a.nav-link.cuatro {
position: relative;
left:-25%;
}
a.nav-link.uno {
position: relative;
left:-23%;
text-align: center;
}
a.nav-link.dos {
position: relative;
left:-53%;
text-align: center;
}
a.nav-link.tres {
position: relative;
left:-20%;
text-align: center;
}
a.nav-link.cinco {
position: relative;
left:-20%;
text-align: center;
}
a.nav-link.dropdown-toggle.dos{
position: relative;
left:-15%;
text-align: center;
}
.Logo {
width: 87%;
position: relative;
left:30%;
background-size: auto 100%;
background-repeat: no-repeat;
margin: auto;
display: block;
}
#uno{
padding: 0;
}
.nav-link.uno:hover{
background: rgba(43,86,162,1.00);
}
.nav-link.dos:hover{
background: rgba(43,86,162,1.00);
}
.nav-link.tres:hover{
background: rgba(43,86,162,1.00);
}
.nav-link.cuatro:hover{
background: rgba(43,86,162,1.00);
}
.nav-link.cinco:hover{
background: rgba(43,86,162,1.00);
}
.navbar .navbar-nav .nav-link:hover {
font-family:Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 104%;
font-weight: bold;
color: white!important;
text-align: center;
}
.navbar .navbar-nav .nav-link:focus {
font-family:Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 104%;
font-weight: bold;
color: rgba(178,205,73,1.00)!important;
}
.dropdown-item{
font-family:Arial, "Helvetica Neue", Helvetica, sans-serif;
width: 100%;
font-size: 104%;
font-weight: bold;
color: rgb(0,171,235);
}
.dropdown-item:hover{
color: rgba(178,205,73,1.00);
background: none;
}
.navbar .navbar-nav .nav-item{
position: relative;
left:13%;
}
i.fa.fa-facebook{
color:rgba(43,86,162,1.00);
position: relative;
left:-783%
}
i.fa.fa-facebook:hover{
color:rgba(178,205,73,1.00);
position: relative;
left:-783%
}
i.fa.fa-twitter{
color:rgba(43,86,162,1.00);
position: relative;
left:-453%;
}
i.fa.fa-twitter:hover{
color:rgba(178,205,73,1.00);
position: relative;
left:-453%;
}
i.fa.fa-youtube{
color:rgba(43,86,162,1.00);
position: relative;
left:-443%
}
i.fa.fa-youtube:hover{
color:rgba(178,205,73,1.00);
position: relative;
left:-443%
}
i.fa.fa-instagram{
color:rgba(43,86,162,1.00);
position: relative;
left:-407%;
bottom:-6%;
}
i.fa.fa-instagram:hover{
color:rgba(178,205,73,1.00);
}
i.fa.fa-envelope{
color:rgba(43,86,162,1.00);
position: relative;
left:-7%
}
i.fa.fa-envelope:hover{
color:rgba(178,205,73,1.00);
position: relative;
left:-7%
}
a.info{
color:rgba(43,86,162,1.00);
position: relative;
left:23%
}
a.info:hover{
color:rgba(178,205,73,1.00);
position: relative;
left:23%
}
a.tel{
color:rgba(43,86,162,1.00);
font-family: arial;
text-decoration:none;
}
a.tel:hover{
color:rgba(178,205,73,1.00);
font-family: arial;
text-decoration:none;
}
a.info{
color:rgba(43,86,162,1.00);
font-family: arial;
text-decoration:none;
}
.dropdown-submenu{
position: relative;
}
.dropdown-submenu a::after{
transform: rotate(-90deg);
position: absolute;
right: 3px;
top: 40%;
}
.dropdown-submenu:hover .dropdown-menu, .dropdown-submenu:focus .dropdown-menu{
display: flex;
flex-direction: column;
position: absolute !important;
margin-top: -30px;
left: 100%;
}
@media (max-width: 992px) {
.dropdown-menu{
width: 50%;
}
.dropdown-menu .dropdown-submenu{
width: auto;
}
}
.navbar .navbar-nav .nav-link {
font-family:Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 104%;
font-weight: bold;
color: rgb(0,171,235);
text-align-last: center;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container-fluid">
<div class="row">
<div class="col-md-12 ">
<nav class="navbar navbar-toggleable-md navbar-light bg-faded" id="menusocial">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a href="#" ><i class="fa fa-facebook"></i></a>
</li>
<li class="nav-item">
<a href="#"><i class="fa fa-twitter"></i></a>
</li>
<li class="nav-item">
<a href="#"> <i class="fa fa-youtube"></i></a>
</li>
<li class="nav-item">
<a href="#"> <i class="fa fa-instagram"></i></a>
</li>
<li class="nav-item">
<a href="#" class="tel"> <i class="fa fa-phone"></i>(4)7916510 ext(1501)</a>
</li>
<li class="nav-item">
<a href="mailto:info@clinicacasadelnino.com" class="info"><i class="fa fa-envelope"></i>info@clinicacasadelnino.com</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="row">
<div class="col-md-12" id="uno">
<nav class="navbar fixed-top navbar-toggleable-md navbar-light bg-faded" id="mimenu" >
<div class="col-md-3 encabezado" id="gradiente1">
<img src="https://i.imgur.com/2jii6Eq.png" title="source: imgur.com" class="Logo">
</div>
<button class="navbar-toggler navbar-toggler-right" 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 mimenu2">
<li class="nav-item b ">
<a class="nav-link dos " href="#">Inicio</a>
</li>
<li class="nav-item a dropdown">
<a class="nav-link uno dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Quienes Somos</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Visión Misión y Objetivos Estrategicos</a>
<a class="dropdown-item" href="#">Reseña Historica</a>
<a class="dropdown-item" href="#">Políticas Institucionales</a>
<a class="dropdown-item" href="#">Valores</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle dos" href="http://example.com" id="navbarDropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Nuestros Servicios
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" data-toggle="dropdown" href="#">Servicios Principales</a>
<ul class="dropdown-menu">
<a class="dropdown-item" href="#">Urgencias</a>
<a class="dropdown-item" href="#">UCI Neonatal</a>
<a class="dropdown-item" href="#">UCI Adultos</a>
<a class="dropdown-item" href="#">Cirugía</a>
<a class="dropdown-item" href="#">Hospitalización</a>
<a class="dropdown-item" href="#">Salas de parto</a>
</ul>
</li>
<li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" data-toggle="dropdown" href="#">Servicios de apoyo</a>
<ul class="dropdown-menu">
<a class="dropdown-item" href="#">Servicio de transfusión sanguínea</a>
<a class="dropdown-item" href="#">Esterilización</a>
<a class="dropdown-item" href="#">Imagenología</a>
<a class="dropdown-item" href="#">Servicio farmacéutico</a>
<a class="dropdown-item" href="#">Nutrición</a>
<a class="dropdown-item" href="#">Terapia física y respiratoria </a> <a class="dropdown-item" href="#">Ambulancia</a>
</ul>
</li>
<li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" data-toggle="dropdown" href="#">Servicios de Consulta Externa</a>
<ul class="dropdown-menu">
<a class="dropdown-item" href="#">Servicio de transfusión sanguínea</a>
<a class="dropdown-item" href="#">Pediatría</a>
<a class="dropdown-item" href="#">Ginecología y obstetricia</a>
<a class="dropdown-item" href="#">Cirugía General</a>
<a class="dropdown-item" href="#">Cirugía Pediátrica</a>
</ul>
</li>
</ul>
</li>
<li class="nav-item c">
<a class="nav-link tres" href="#">Responsabilidad Social</a>
</li>
<li class="nav-item d">
<a class="nav-link cuatro" href="#">Laboratorio</a>
</li>
<li class="nav-item d">
<a class="nav-link cinco" href="#">Correo Corporativo</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="row fila2">
<div class="col-12 imagenesc">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="https://i.imgur.com/GKeJMwS.jpg" title="source: imgur.com" alt="First slide"/>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" alt="Second slide" src="https://i.imgur.com/CaZbz8L.jpg" title="source: imgur.com" />
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Nextborder</span> </a><!----fin carousel-----> </div>
</div>
</div>
</div>
你好我的下拉子菜单有问题我希望该菜单有响应，另一个问题是我的徽标图像，我也希望徽标响应，我将徽标移到左边，但是当我调整浏览器的大小时徽标移动到导航栏按钮旁边，我也想修复我的第二个导航栏菜单，是一个带社交图标的社交菜单，我希望当我调整浏览器大小时该菜单可见，我把代码放在片段中，我想要某人的帮助。
这是我的代码
答案 0 :(得分：0)
您正在使用Bootstrap v4，此处为.Logo您提到的width: 87%;，父亲为col-md-3。 md表示中等设备，当设备低于991px时，宽度可能达到100％。对于此快速修复，将在媒体查询中应用徽标的特定宽度，代码如下所示。
@media(max-width: 991px) {
.Logo {
width: 200px !important;
}
}
<强>演示
body{
padding: 13%;
}
#mimenu{
padding-right: 15%;
padding-top: 5%;
background-color: white;
}
a.nav-link.cuatro {
position: relative;
left:-25%;
}
a.nav-link.uno {
position: relative;
left:-23%;
text-align: center;
}
a.nav-link.dos {
position: relative;
left:-53%;
text-align: center;
}
a.nav-link.tres {
position: relative;
left:-20%;
text-align: center;
}
a.nav-link.cinco {
position: relative;
left:-20%;
text-align: center;
}
a.nav-link.dropdown-toggle.dos{
position: relative;
left:-15%;
text-align: center;
}
.Logo {
width: 87%;
position: relative;
left:30%;
background-size: auto 100%;
background-repeat: no-repeat;
margin: auto;
display: block;
}
#uno{
padding: 0;
}
.nav-link.uno:hover{
background: rgba(43,86,162,1.00);
}
.nav-link.dos:hover{
background: rgba(43,86,162,1.00);
}
.nav-link.tres:hover{
background: rgba(43,86,162,1.00);
}
.nav-link.cuatro:hover{
background: rgba(43,86,162,1.00);
}
.nav-link.cinco:hover{
background: rgba(43,86,162,1.00);
}
.navbar .navbar-nav .nav-link:hover {
font-family:Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 104%;
font-weight: bold;
color: white!important;
text-align: center;
}
.navbar .navbar-nav .nav-link:focus {
font-family:Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 104%;
font-weight: bold;
color: rgba(178,205,73,1.00)!important;
}
.dropdown-item{
font-family:Arial, "Helvetica Neue", Helvetica, sans-serif;
width: 100%;
font-size: 104%;
font-weight: bold;
color: rgb(0,171,235);
}
.dropdown-item:hover{
color: rgba(178,205,73,1.00);
background: none;
}
.navbar .navbar-nav .nav-item{
position: relative;
left:13%;
}
i.fa.fa-facebook{
color:rgba(43,86,162,1.00);
position: relative;
left:-783%
}
i.fa.fa-facebook:hover{
color:rgba(178,205,73,1.00);
position: relative;
left:-783%
}
i.fa.fa-twitter{
color:rgba(43,86,162,1.00);
position: relative;
left:-453%;
}
i.fa.fa-twitter:hover{
color:rgba(178,205,73,1.00);
position: relative;
left:-453%;
}
i.fa.fa-youtube{
color:rgba(43,86,162,1.00);
position: relative;
left:-443%
}
i.fa.fa-youtube:hover{
color:rgba(178,205,73,1.00);
position: relative;
left:-443%
}
i.fa.fa-instagram{
color:rgba(43,86,162,1.00);
position: relative;
left:-407%;
bottom:-6%;
}
i.fa.fa-instagram:hover{
color:rgba(178,205,73,1.00);
}
i.fa.fa-envelope{
color:rgba(43,86,162,1.00);
position: relative;
left:-7%
}
i.fa.fa-envelope:hover{
color:rgba(178,205,73,1.00);
position: relative;
left:-7%
}
a.info{
color:rgba(43,86,162,1.00);
position: relative;
left:23%
}
a.info:hover{
color:rgba(178,205,73,1.00);
position: relative;
left:23%
}
a.tel{
color:rgba(43,86,162,1.00);
font-family: arial;
text-decoration:none;
}
a.tel:hover{
color:rgba(178,205,73,1.00);
font-family: arial;
text-decoration:none;
}
a.info{
color:rgba(43,86,162,1.00);
font-family: arial;
text-decoration:none;
}
.dropdown-submenu{
position: relative;
}
.dropdown-submenu a::after{
transform: rotate(-90deg);
position: absolute;
right: 3px;
top: 40%;
}
.dropdown-submenu:hover .dropdown-menu, .dropdown-submenu:focus .dropdown-menu{
display: flex;
flex-direction: column;
position: absolute !important;
margin-top: -30px;
left: 100%;
}
@media (max-width: 992px) {
.dropdown-menu{
width: 50%;
}
.dropdown-menu .dropdown-submenu{
width: auto;
}
}
.navbar .navbar-nav .nav-link {
font-family:Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 104%;
font-weight: bold;
color: rgb(0,171,235);
text-align-last: center;
}
/* UPDATED CODE */
@media(max-width: 991px) {
.Logo {
width: 200px !important;
}
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container-fluid">
<div class="row">
<div class="col-md-12 ">
<nav class="navbar navbar-toggleable-md navbar-light bg-faded" id="menusocial">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a href="#" ><i class="fa fa-facebook"></i></a>
</li>
<li class="nav-item">
<a href="#"><i class="fa fa-twitter"></i></a>
</li>
<li class="nav-item">
<a href="#"> <i class="fa fa-youtube"></i></a>
</li>
<li class="nav-item">
<a href="#"> <i class="fa fa-instagram"></i></a>
</li>
<li class="nav-item">
<a href="#" class="tel"> <i class="fa fa-phone"></i>(4)7916510 ext(1501)</a>
</li>
<li class="nav-item">
<a href="mailto:info@clinicacasadelnino.com" class="info"><i class="fa fa-envelope"></i>info@clinicacasadelnino.com</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="row">
<div class="col-md-12" id="uno">
<nav class="navbar fixed-top navbar-toggleable-md navbar-light bg-faded" id="mimenu" >
<div class="col-3 encabezado" id="gradiente1">
<img src="https://i.imgur.com/2jii6Eq.png" title="source: imgur.com" class="Logo">
</div>
<button class="navbar-toggler navbar-toggler-right" 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 mimenu2">
<li class="nav-item b ">
<a class="nav-link dos " href="#">Inicio</a>
</li>
<li class="nav-item a dropdown">
<a class="nav-link uno dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Quienes Somos</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Visión Misión y Objetivos Estrategicos</a>
<a class="dropdown-item" href="#">Reseña Historica</a>
<a class="dropdown-item" href="#">Políticas Institucionales</a>
<a class="dropdown-item" href="#">Valores</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle dos" href="http://example.com" id="navbarDropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Nuestros Servicios
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" data-toggle="dropdown" href="#">Servicios Principales</a>
<ul class="dropdown-menu">
<a class="dropdown-item" href="#">Urgencias</a>
<a class="dropdown-item" href="#">UCI Neonatal</a>
<a class="dropdown-item" href="#">UCI Adultos</a>
<a class="dropdown-item" href="#">Cirugía</a>
<a class="dropdown-item" href="#">Hospitalización</a>
<a class="dropdown-item" href="#">Salas de parto</a>
</ul>
</li>
<li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" data-toggle="dropdown" href="#">Servicios de apoyo</a>
<ul class="dropdown-menu">
<a class="dropdown-item" href="#">Servicio de transfusión sanguínea</a>
<a class="dropdown-item" href="#">Esterilización</a>
<a class="dropdown-item" href="#">Imagenología</a>
<a class="dropdown-item" href="#">Servicio farmacéutico</a>
<a class="dropdown-item" href="#">Nutrición</a>
<a class="dropdown-item" href="#">Terapia física y respiratoria </a> <a class="dropdown-item" href="#">Ambulancia</a>
</ul>
</li>
<li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" data-toggle="dropdown" href="#">Servicios de Consulta Externa</a>
<ul class="dropdown-menu">
<a class="dropdown-item" href="#">Servicio de transfusión sanguínea</a>
<a class="dropdown-item" href="#">Pediatría</a>
<a class="dropdown-item" href="#">Ginecología y obstetricia</a>
<a class="dropdown-item" href="#">Cirugía General</a>
<a class="dropdown-item" href="#">Cirugía Pediátrica</a>
</ul>
</li>
</ul>
</li>
<li class="nav-item c">
<a class="nav-link tres" href="#">Responsabilidad Social</a>
</li>
<li class="nav-item d">
<a class="nav-link cuatro" href="#">Laboratorio</a>
</li>
<li class="nav-item d">
<a class="nav-link cinco" href="#">Correo Corporativo</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="row fila2">
<div class="col-12 imagenesc">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="https://i.imgur.com/GKeJMwS.jpg" title="source: imgur.com" alt="First slide"/>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" alt="Second slide" src="https://i.imgur.com/CaZbz8L.jpg" title="source: imgur.com" />
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Nextborder</span> </a><!----fin carousel-----> </div>
</div>
</div>
</div>