如何在浏览器调整大小时调整下拉子菜单的大小

时间：2017-10-06 03:23:49

标签： html5 css3 

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>

你好我的下拉子菜单有问题我希望该菜单有响应，另一个问题是我的徽标图像，我也希望徽标响应，我将徽标移到左边，但是当我调整浏览器的大小时徽标移动到导航栏按钮旁边，我也想修复我的第二个导航栏菜单，是一个带社交图标的社交菜单，我希望当我调整浏览器大小时该菜单可见，我把代码放在片段中，我想要某人的帮助。

这是我的代码

1 个答案:

答案 0 :(得分：0)

您正在使用Bootstrap v4，此处为.Logo您提到的width: 87%;，父亲为col-md-3。 md表示中等设备，当设备低于991px时，宽度可能达到100％。对于此快速修复，将在媒体查询中应用徽标的特定宽度，代码如下所示。 

@media(max-width: 991px) {
  .Logo {
    width: 200px !important;
  }
}

<强>演示

＆＃13;
＆＃13; 
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;
  }
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

以下是Codepen demo link.

相关问题
最新问题