1

Bom estou fazendo um carousel, e quero colocar outra imagem do lado do carousel porém fica com um espaço queria saber como remover, na minha tentativa eu fiz duas divs flutuarem um para a direita e esquerda por meu carousel coloquei 70% e para minhas imagens coloquei 30 %, porém o espaço continua, como resolver ?

<!DOCTYPE html>
<html lang="pt-br">
<head>
<!-- Meta tags Obrigatórias -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Olá, mundo!</title>

<style type="text/css">
    .carousel-item{
      margin: 0;
    }
</style>
</head>
<body>

<div class="container clearfix" style="background-color: ;">
   <div class="float-left" style="width: 70%;">
      <div class="carousel slide carousel-fade" data-ride="carousel">
        <div class="carousel-inner">
          <div class="carousel-item active">
              <img class="img-fluid" src="img2.png">
          </div>
          <div class="carousel-item">
              <img class="img-fluid" src="img3.png">
          </div>
          <div class="carousel-item">
              <img class="img-fluid"  src="img3.png">
          </div>
        </div>
      </div>
   </div>
   <div class="float-right" style="width: 30%;">
      <img class="img-fluid" src="img1.png">
   </div>
</div>

<!-- JavaScript (Opcional) -->
<!-- jQuery primeiro, depois Popper.js, depois Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
 </body>

2
  • Esse carrossel eh o padrão do bootstrap ou vc usou algum outro?
    – hugocsl
    23/02/2019 às 17:38
  • padrão do bootstrap 23/02/2019 às 18:21

2 Respostas 2

1

Provavelmente a largura das imagens são menores do que os 70% que você definiu. Com isso ela não ocupa toda a largura da div, deixando um espaço à direita.

Você pode resolver isso adicionando a classe w-100 nas imagens, que irá adicionar a propriedade width: 100%, fazendo com que elas ocupem toda a largura da div.

Porém as imagens precisam ter uma resolução onde a largura seja no mínimo do mesmo tamanho da largura da div, senão elas irão "estourar" quando o CSS aumentá-las.

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<div class="container clearfix" style="background-color: red;">
   <div class="float-left" style="width: 70%;">
      <div class="carousel slide carousel-fade" data-ride="carousel">
        <div class="carousel-inner">
          <div class="carousel-item active">
              <img class="img-fluid w-100" src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">
          </div>
          <div class="carousel-item">
              <img class="img-fluid w-100" src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">
          </div>
          <div class="carousel-item">
              <img class="img-fluid w-100"  src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">
          </div>
        </div>
      </div>
   </div>
   <div class="float-right" style="width: 30%;">
      <img class="img-fluid" src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">
   </div>
</div>

1

Se o problema de espaço for nas laterais remova o espaço assim:

<div class="container clearfix" style="min-width: 100% !important">

Se for entre as imagens é só alterar a margin:

<div class="float-left" style="width: 70%; margin: 0;">

e

<div class="float-right" style="width: 30%; margin: 0;">

Se o problema for o espaço em branco do tamanho original da imagem:

<style type="text/css">
img{
min-width:100%;
background-repeat: no-repeat;
  background-size: cover;
}
</style>

seu codigo

<!DOCTYPE html>
<html lang="pt-br">
<head>
<!-- Meta tags Obrigatórias -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Olá, mundo!</title>

<style type="text/css">
    .carousel-item{
      margin: 0;
    }
img{
min-width:100%;
background-repeat: no-repeat;
  background-size: cover;
}
</style>
</head>
<body>

<div class="container clearfix" style="min-width: 100% !important">
   <div class="float-left" style="width: 70%; margin: 0;">
      <div class="carousel slide carousel-fade" data-ride="carousel">
        <div class="carousel-inner">
          <div class="carousel-item active">
              <img class="img-fluid" src="http://images7.memedroid.com/images/UPLOADED39/53f395f2546f4.jpeg">
          </div>
          <div class="carousel-item">
              <img class="img-fluid" src="https://parseur.com/media/you-shall-not-parse.jpg">
          </div>
          <div class="carousel-item">
              <img class="img-fluid"  src="https://memegenerator.net/img/instances/60314002.jpg">
          </div>
        </div>
      </div>
   </div>
   <div class="float-right" style="width: 30%; margin: 0;">
      <img class="img-fluid" src="https://memegenerator.net/img/instances/60314002.jpg">
   </div>
</div>

<!-- JavaScript (Opcional) -->
<!-- jQuery primeiro, depois Popper.js, depois Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous">
</script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous">
</script>
 </body>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .