-3

Como posso colocar a coluna amarela colada no lado da coluna roxa?

inserir a descrição da imagem aqui
clique para visualizar em seu tamanho original

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
  <link rel='stylesheet' href='estilo.css' type='text/css' />
  <title>Site Com Bootstrap</title>

</head>

<body>
  <div class='container-fluid'>
    <div class='row justify-content-around' style='height:500px; background-color: red;'>
      <div class='col-2' style='background-color: orange; height:100px;'>
        ...
      </div>

      <div class='col-2' style='background-color: yellow; height:100px;'>
        ...
      </div>

      <div class='col-2' style='background-color: purple; height:100px; display:flex; align-items:center; justify-content: center;'>
        <div>algo</div>
      </div>
    </div>

  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
</body>

</html>

2
  • É só colocar a classe ml-auto na coluna amarela
    – hugocsl
    3/01/2022 às 17:11
  • Não funcionou corretamente, foi pro lado do roxo? sim, funcionou, mas o justify-content-around foi modificado, quando usa esses margins eles colocam as colunas colada nas margens. Por exemplo, se alguem tentar posicionar a coluna roxa no lado do amarelo, esses margins não funcionam. 4/01/2022 às 11:53

1 Resposta 1

-2

Amigo,

Faz uma estrutura assim:

Container
  Row
    Col
      Coluna Verde
    Col
      Container
        Row
          Col --> Aqui use o espaçamento que desejar
            Coluna Amarela
            Coluna Roxa
3
  • Sua resposta pode ser melhorada adicionando informações fundamentais. Basta editar para adicionar mais detalhes, como citações ou documentação para que outras pessoas possam confirmar que sua resposta está correta. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    3/01/2022 às 15:38
  • poxa, num tem algum comando tipo float:right? 3/01/2022 às 16:00
  • float:right testei e não pegou ,gostaria de algo assim para eu colocar na coluna 3/01/2022 às 16:00

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 .