0

Como é que ao inserir elementos na coluna da esquerda isso não afecta a altura das linhas da coluna da direita; ou seja, como faço duas colunas totalmente independentes para que ao inserir elementos numa coluna isso não afecte em nada a outra?

Se eu inserir uma imagem na coluna da esquerda (neste caso o logo_blank.png), a imagem da bicicleta (product1), que está na coluna da direita, move-se para baixo. Ora, como fazer para que a bicicleta não se mova ela tem de ficar onde está?

<!DOCTYPE html>
<html>
   <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<link href="./css/lotti.css" rel="stylesheet" type="text/css">

<title>Tombola Dinamica</title>

  <!-- Custom fonts for this template -->
  <link href="./b_styles/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
  <!--[if lt IE 7]>
  <style type="text/css">
     img { behavior: url("pngfix.htc"); }
  </style>
  <![endif]-->
   </head>
<body scroll="no" style="overflow: auto">
<header class="image-background">
  <div class="container">
     <div class="row mx-md-n5">
               <div class="col-md-7">

<img id="logo" src="./img/outras/logo_blank.png" class="rounded float-left logo" alt="...">   
           
 <img id="logo" src="./img/outras/logo_blank.png" class="rounded float-left logo" alt="...">                   
                   
               </div>
           <div class="col-md-5">

        </div>
     </div>
     <div class="row mt-3">
           <div class="col-md-7">
 

           </div>
        <div class="col-md-5">
			<img id="apostSort" src="./img/outras/product1.jpg" class="rounded float-left" alt="...">
		</div>
     </div>
     <div class="row mt-4">
           <div class="col-md-7">


           </div>
        <div class="col-md-5">
           <div id="d4w4" >
               
           </div>
        </div>
     </div>
     <div class="row mt-4">
           <div class="col-md-7">
 

           </div>
        <div class="col-md-5 ">
           <div id="d4w3"></div>
        </div>
     </div>
     <div class="row mt-1">
           <div class="col-md-7">

                      
           </div>
        <div class="col-md-5">
           <div id="d4w2"></div>
        </div>
     </div>
  </div>

<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.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
   
   </body>
</html>

5
  • Tem algum código? Sem informação suficiente não da pra tentar ajudar. Commented 15/01/2019 às 16:38
  • Cara de mais detalhes... Não afete a altura da coluna do lado em que sentido? Coloque qual versão do Bootstrap está com problema, se possível coloque uma imagem do layout e o que vc já tiver de código...
    – hugocsl
    Commented 15/01/2019 às 16:40
  • Publiquei então o código. Se inserir uma imagem na coluna da esquerda a imagem da bicicleta que está na coluna da direita move-se para baixo. Ora, como fazer para que a bicicleta não se mova?
    – user110243
    Commented 15/01/2019 às 16:55
  • @user1856464 Se você tem outra dúvida (mesmo que relacionada a esta da publicação) faça uma nova pergunta com seu código atualizado e o novo problema.
    – Jéf Bueno
    Commented 15/01/2019 às 19:51
  • Com a explicação do hugocsl já entendi melhor o problema. Obrigado.
    – user110243
    Commented 17/01/2019 às 11:28

1 Resposta 1

1

Acho que o problema é que vc talvez não tenha pegado muto bem como funciona o Grid do Bootstrap. Cada div com class row representa uma linha, ou seja, vc nunca vai ter uma row ao lado da outra, sempre vai ser um row abaixo da outra, em coluna. Já dentro da row todos os elementos se alinha na horizontal, um ao lado do outro, até que a linha quebre o algum elemento pule para o espaço de baixo.

inserir a descrição da imagem aqui

Seu problema é que vc tem uma row com uma imagem dentro e do lado uma div vazia, ela que cria esse "espaço vazio" e esta quebrando seu layout. Para arrumar basta vc colocar a imagem que está na row de baixo nessa div vazia. Assim todos ficam na mesma row.

Olha ai como ficaria. Execute em "página toda" para ver melhor.

OBS: Se vc quiser um espaço entre a imagem e o topo adicione um margint-top: 100px por exemplo na imagem. Eu inclusive já coloquei ai a classe nativa mt-5 do Bootstrap que é equivale a 5rem de altura, mas vc pode criar um css com o margin-top que quiser e colocar na imagem...

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B"
        crossorigin="anonymous">
    <link href="./css/lotti.css" rel="stylesheet" type="text/css">

    <title>Tombola Dinamica</title>

    <!-- Custom fonts for this template -->
    <link href="http://clubesorte.org/b_styles/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <!--[if lt IE 7]>
  <style type="text/css">
     img { behavior: url("pngfix.htc"); }
  </style>
  <![endif]-->
  <style>
  
  </style>
</head>

<body scroll="no" style="overflow: auto">
    <header class="image-background">
        <div class="container">
            <div class="row mx-md-n5">
                <div class="col-md-7">

                    <img id="logo" src="https://www.clubesorte.org/e_tombolas/a_clubesorte/16n/teste_grid-bootstrap/img/outras/logo_blank.png"
                        class="rounded float-left logo" alt="...">

                    <img id="logo" src="https://www.clubesorte.org/e_tombolas/a_clubesorte/16n/teste_grid-bootstrap/img/outras/logo_blank.png"
                        class="rounded float-left logo" alt="...">
                    <img id="logo" src="https://www.clubesorte.org/e_tombolas/a_clubesorte/16n/teste_grid-bootstrap/img/outras/logo_blank.png"
                        class="rounded float-left logo" alt="...">
                    <img id="logo" src="https://www.clubesorte.org/e_tombolas/a_clubesorte/16n/teste_grid-bootstrap/img/outras/logo_blank.png"
                        class="rounded float-left logo" alt="...">
                    <img id="logo" src="https://www.clubesorte.org/e_tombolas/a_clubesorte/16n/teste_grid-bootstrap/img/outras/logo_blank.png"
                        class="rounded float-left logo" alt="...">
                    <img id="logo" src="https://www.clubesorte.org/e_tombolas/a_clubesorte/16n/teste_grid-bootstrap/img/outras/logo_blank.png"
                        class="rounded float-left logo" alt="...">
                    <img id="logo" src="https://www.clubesorte.org/e_tombolas/a_clubesorte/16n/teste_grid-bootstrap/img/outras/logo_blank.png"
                        class="rounded float-left logo" alt="...">

                </div>
                <div class="col-md-5">
                    <img id="apostSort" src="https://www.clubesorte.org/e_tombolas/a_clubesorte/16n/teste_grid-bootstrap/img/outras/product1.jpg"
                    class="rounded float-left mt-5" alt="...">
                </div>
            </div>
            <div class="row mt-3">
                <div class="col-md-7">


                </div>
                <div class="col-md-5">
                    
                </div>
            </div>
            <div class="row mt-4">
                <div class="col-md-7">


                </div>
                <div class="col-md-5">
                    <div id="d4w4">

                    </div>
                </div>
            </div>
            <div class="row mt-4">
                <div class="col-md-7">


                </div>
                <div class="col-md-5 ">
                    <div id="d4w3"></div>
                </div>
            </div>
            <div class="row mt-1">
                <div class="col-md-7">


                </div>
                <div class="col-md-5">
                    <div id="d4w2"></div>
                </div>
            </div>
        </div>
    </header>

        <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.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em"
            crossorigin="anonymous"></script>

</body>

</html>

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