Question

我正在尝试在旋转木马内部的图像末尾放置一个蓝色边框，但我不能，这是我的旋转木马的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>

Answer 1

请检查一下。它的工作。请删除row和col-12课程。

＆＃13;

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

＆＃13;

<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>

＆＃13;

在bootstrap4中的carousel内的图像之后添加边框到div的底部

1 个答案: