1

O dropdown do carrinho, sai fora da imagem, é possível fazer com que ele desça para o lado esquerdo?

aqui está o codigo:

@import '//stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css';
@import '//stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css';
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<!-- Navigation -->
     <div class="navbar navbar-expand bg-light" >
        <div class="container-fluid">
       <a href="index.php" class="navbar-brand"><img src="imagens/logo_fanamol.png" width="130" height="140"></a>
  <!--<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>-->

  <div class="collapse navbar-collapse">
    <ul class="nav nav-tabs">
      <li class="nav-item active">
        <a class="nav-link" href="index.php">Home <span class="sr-only"></span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Sobre Nós</a>
      </li>
        <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Loja online
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
         <a class="dropdown-item" href="mol_compressao.html">Molas de Compressão</a>
          <a class="dropdown-item" href="mol_tracao.html">Molas de Tração</a>
          <a class="dropdown-item" href="mol_torcao.html">Molas de Torção</a>
          <a class="dropdown-item" href="mol_pressao.html">Molas de Pressão</a>
          <a class="dropdown-item" href="mol_lamina.html">Molas de Lamina</a>
        </div>
      </li>
        <li class="nav-item">
        <a class="nav-link" href="contactos.php">Contactos</a>
      </li>       
    </ul>
      </div>
            
      <ul class="nav nav-navbar navbar-right">
          <ul class="nav nav-tabs">           
             
          <div class="nav-link dropdown">
              <li class="nav-item"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i style="font-size:24px" class="fa">&#xf090;</i>Entrar</a>
              <div class="dropdown-menu" style="width:300px;">
                    <div class="panel panel-primary">
                        <div class="panel-heading"><h3 align="center">Entrar</h3></div>
                        <div class="panel-heading">
                        <label for="email">Email:</label>
                        <input type="email" class="form-control" id="email" required/>
                        <label for="email">Password:</label>
                        <input type="password" class="form-control" id="password" required/>
                               <br/>
                            <a href="#" style="color:blue; list-style:none;">Esqueci a password</a><input type="submit" class="btn btn-primary" style="float:right;" id="login" value="Login">
                        </div>
                        <div class="panel-footer" id="e_msg"></div>
                        </div>    
                  
              </div>
              </li>
              </div>
              
              
                <li class="nav-item"><a class="nav-link" href="#"><i style="font-size:24px" class="fa">&#xf2c0;</i>
Registrar</a>
              </li>
               <div class="nav-link dropdown" >
               <li class="nav-item"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i style="font-size:24px" class="fa">&#xf07a;</i>Carrinho</a>
                   <div class="dropdown-menu" style="width:600px;">
                   <div class="panel panel-success">
                       <div class="panel-heading">
                       <div class="row">
                           <div class="col-md-3">ref</div>
                           <div class="col-md-3">productimage</div>
                           <div class="col-md-3">productname</div>
                           <div class="col-md-3">price</div>

                           </div>
                       </div>
                       <div class="panel-body"></div>
                       <div class="panel-footer"></div>
                       </div>
                   </div>
                   
            </li>
                   </div>
     </ul>
          </ul>
            </div>
            
      </div>

      <br>
      
      <div class="col-md-8 single-right-left simpleCart_shelfItem">
					<h3>Big Wing Sneakers  (Navy)</h3>
            <p><span class="item_price">$650</span> <del>- $900</del></p>
					</div>
					<div class="occasion-cart">
						<div class="snipcart-details top_brand_home_details item_add single-item hvr-outline-out button2">
															<form action="#" method="post">
																<fieldset>
																	<input type="hidden" name="cmd" value="_cart">
																	<input type="hidden" name="add" value="1">
																	<input type="hidden" name="business" value=" ">
																	<input type="hidden" name="item_name" value="Wing Sneakers">
																	<input type="hidden" name="amount" value="650.00">
																	<input type="hidden" name="discount_amount" value="1.00">
																	<input type="hidden" name="currency_code" value="USD">
																	<input type="hidden" name="return" value=" ">
																	<input type="hidden" name="cancel_return" value=" ">
																	<input type="submit" name="submit" value="Add to cart" class="button">
																</fieldset>
															</form>
														</div>
																			
					</div>

inserir a descrição da imagem aqui

3
  • consegue construir um exemplo com o código replicando o problema? apenas olhando o html, sem o css ainda fica difícil de entender o que acontece Commented 3/05/2018 às 11:27
  • @edshewa edite a pergunta com seu código de forma que a gente possa simular o problema. Só como o que vc colocou fica difícil te dar a resposta exata. Pois o problema pode estar no CSS ou em algum outro elemento da página que está influenciando o outro... Coloque o código completo que ajuda!
    – hugocsl
    Commented 3/05/2018 às 12:17
  • já ajuda assim?
    – edshewa
    Commented 3/05/2018 às 12:47

2 Respostas 2

3

Adicione a classe .dropdown-menu-right à div .dropdown-menu, para alinhar o menu à direita, ficando assim:

<div class="dropdown-menu dropdown-menu-right" style="width:600px;">

Bootstrap 4: alinhamento de menus

1

Vc mudou bastante a estrutura básica do modelo padrão do Drop-Menu do Bootstrap. Parece que vc está querendo construir uma "página" dentro desse Drop que vai abrir...

De qualquer forma mesmo o indicado sendo o .dropdown-menu-right como o @dvd indicou essa classe não vai funcionar no seu caso. Vc vai ter que fazer um CSS mais específico para fazer alinhar a direita, pois deve ter algo sobrescrevendo os estilos ou coisa do tipo...

No caso eu coloquei na div com o dropdown-menu um left:auto e right:0 e agora está ficando justo a direita.

Veja como ficou abaixo. (mande exibir em "Página toda" para ver melhor já que vc ainda não tratou a parte responsiva)

<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>

<!-- Navigation -->
     <div class="navbar navbar-expand bg-light" >
        <div class="container-fluid">
       <a href="index.php" class="navbar-brand"><img src="imagens/logo_fanamol.png" width="130" height="140"></a>
  <!--<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>-->

  <div class="collapse navbar-collapse">
    <ul class="nav nav-tabs">
      <li class="nav-item active">
        <a class="nav-link" href="index.php">Home <span class="sr-only"></span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Sobre Nós</a>
      </li>
        <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Loja online
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
         <a class="dropdown-item" href="mol_compressao.html">Molas de Compressão</a>
          <a class="dropdown-item" href="mol_tracao.html">Molas de Tração</a>
          <a class="dropdown-item" href="mol_torcao.html">Molas de Torção</a>
          <a class="dropdown-item" href="mol_pressao.html">Molas de Pressão</a>
          <a class="dropdown-item" href="mol_lamina.html">Molas de Lamina</a>
        </div>
      </li>
        <li class="nav-item">
        <a class="nav-link" href="contactos.php">Contactos</a>
      </li>       
    </ul>
      </div>
            
      <ul class="nav nav-navbar navbar-right">
          <ul class="nav nav-tabs">           
             
          <div class="nav-link dropdown">
              <li class="nav-item"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i style="font-size:24px" class="fa">&#xf090;</i>Entrar</a>
              <div class="dropdown-menu" style="width:300px;">
                    <div class="panel panel-primary">
                        <div class="panel-heading"><h3 align="center">Entrar</h3></div>
                        <div class="panel-heading">
                        <label for="email">Email:</label>
                        <input type="email" class="form-control" id="email" required/>
                        <label for="email">Password:</label>
                        <input type="password" class="form-control" id="password" required/>
                               <br/>
                            <a href="#" style="color:blue; list-style:none;">Esqueci a password</a><input type="submit" class="btn btn-primary" style="float:right;" id="login" value="Login">
                        </div>
                        <div class="panel-footer" id="e_msg"></div>
                        </div>    
                  
              </div>
              </li>
              </div>
              
              
                <li class="nav-item"><a class="nav-link" href="#"><i style="font-size:24px" class="fa">&#xf2c0;</i>
Registrar</a>
              </li>
               <div class="nav-link dropdown" >
               <li class="nav-item"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i style="font-size:24px" class="fa">&#xf07a;</i>Carrinho</a>
                   <div class="dropdown-menu" style="width:600px; left: auto; right: 0;">
                   <div class="panel panel-success">
                       <div class="panel-heading">
                       <div class="row">
                           <div class="col-md-3">ref</div>
                           <div class="col-md-3">productimage</div>
                           <div class="col-md-3">productname</div>
                           <div class="col-md-3">price</div>

                           </div>
                       </div>
                       <div class="panel-body"></div>
                       <div class="panel-footer"></div>
                       </div>
                   </div>
                   
            </li>
                   </div>
     </ul>
          </ul>
            </div>
            
      </div>

      <br>
      
      <div class="col-md-8 single-right-left simpleCart_shelfItem">
					<h3>Big Wing Sneakers  (Navy)</h3>
            <p><span class="item_price">$650</span> <del>- $900</del></p>
					</div>
					<div class="occasion-cart">
						<div class="snipcart-details top_brand_home_details item_add single-item hvr-outline-out button2">
															<form action="#" method="post">
																<fieldset>
																	<input type="hidden" name="cmd" value="_cart">
																	<input type="hidden" name="add" value="1">
																	<input type="hidden" name="business" value=" ">
																	<input type="hidden" name="item_name" value="Wing Sneakers">
																	<input type="hidden" name="amount" value="650.00">
																	<input type="hidden" name="discount_amount" value="1.00">
																	<input type="hidden" name="currency_code" value="USD">
																	<input type="hidden" name="return" value=" ">
																	<input type="hidden" name="cancel_return" value=" ">
																	<input type="submit" name="submit" value="Add to cart" class="button">
																</fieldset>
															</form>
														</div>
																			
					</div>

OBS: Vc precisa verificar a construção dessa Nav-Bar pois ela só está "dropando" depois do segundo clique!

2
  • obrigado Hugo, funcionou exatamente como eu queria, mas como voce referiu so "dropa ao segundo clique, antes isso nao acontecia. Pode me dizer o que esta a causar isso por favor?
    – edshewa
    Commented 3/05/2018 às 13:59
  • Muito provavelmente isso acontece devido a forma que vc montou a estrutura do HTML. Sugiro vc verificar na documentação como é o modelo proposto pelo Bootstrap e construir sua estrutura seguindo aquele padrão, e depois adaptar o que estiver dentro. Mas es estrutura básica da "casa" antes de abrir o menu vc deveria seguir a documentação, pq o seu está um pouco confuso com Nav dentro de Nav depois o Drop... acho que ai que deve estar bugando. Mas qualquer coisa cria uma Pergunta Nova, que fica mais fácil pra te responder.
    – hugocsl
    Commented 3/05/2018 às 14:05

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 .