Skip to main content
adicionou 174 caracteres ao conteúdo
Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 128

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>

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:

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

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>

Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 128

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:

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