代码之家 › 专栏 › 技术社区 › Ricardo Roa

在bootstrap4中旋转木马内的图像后,将边框添加到div的底部

bootstrap-4 html jquery

Ricardo Roa · 技术社区 · 8 年前

我试图在旋转木马内图像的末尾放置一个蓝色边框,但我做不到,这是我的旋转木马HTML代码。你怎么能加上边界?,图片的上边框是蓝色的,同样的边框必须在图片后的底部,请帮忙这是我的CSS和HTML代码

<div class="row fila2">
  <!----inicio columna 2----->              
  <div class="col-12 imagenesc">   
    <!----inicio carousel----->      
    <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="imagenes/20130819180556.jpg" alt="First slide">
        </div>
      <div class="carousel-item">
        <img class="d-block img-fluid" src="imagenes/20130819180644.jpg" alt="Second slide">
      </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>

1 回复 | 直到 8 年前

ankita patel 8 年前

row 和 col-12 班

.fila2 img { 
  max-width: 100%; 
  border: 5px solid #219ED6;       
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">

<div class="fila2">
  <!----inicio columna 2----->              
  <div class="imagenesc">   
    <!----inicio carousel----->      
    <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://dummyimage.com/1920x700/000/fff.jpg&text=sample+image" alt="First slide">
        </div>
      <div class="carousel-item">
        <img class="d-block img-fluid" src="https://dummyimage.com/1920x700/000/fff.jpg&text=sample+image2" alt="Second slide">
      </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>