Ver Mensaje Individual
  #1 (permalink)  
Antiguo 03/03/2020, 18:09
saulrayados
 
Fecha de Ingreso: abril-2016
Mensajes: 44
Antigüedad: 4 años, 10 meses
Puntos: 0
Pregunta Evitar que pierda los estilos de Bootstrap

Hola, tengo un problema que llevo como 7 horas intentando resolver.
Como puedo hacer que la barra de búsqueda tenga un menú desplegable pero sin que pierda los estilos de Bootstrap, que no pierda su tamaño original, ya intente cambiando cambiando el class de la etiqueta <a> por id y sigue pasando lo mismo.
Tambien tengo otro problema, al ponerle un header el menu desplegable aparece debajo del heder, en vez que aparezca sobre el header

Código HTML:
Ver original
  1.     <head>
  2.         <!-- Required meta tags -->
  3.         <meta charset="utf-8">
  4.         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  5.         <title>Google Noticias</title>
  6.         <!-- Bootstrap CSS -->
  7.         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  8.         <link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
  9.     </head>
  10.     <body>
  11.     <!--<header>-->
  12.     <div id="search">
  13.         <div class="input-group">
  14.       <button type="button" class="btn-search">
  15.       <i class="fas fa-search"></i>
  16.     </button>
  17.       <a class="nav-link" data-toggle="dropdown" href="#">
  18.  
  19.             <input type="text" class="form-control" placeholder="Busca temas, ubicaciones y fuentes">
  20.     </a>
  21.       <div id="drop-menu">
  22.     <div class="dropdown-menu">
  23.       <a class="dropdown-item" href="#">Action</a>
  24.       <a class="dropdown-item" href="#">Another action</a>
  25.       <a class="dropdown-item" href="#">Something else here</a>
  26.       <a class="dropdown-item" href="#">Separated link</a>
  27.       <a class="dropdown-item" href="#">Action</a>
  28.       <a class="dropdown-item" href="#">Another action</a>
  29.       <a class="dropdown-item" href="#">Something else here</a>
  30.       <a class="dropdown-item" href="#">Separated link</a>
  31.     </div>
  32.       </div>
  33.      
  34.             <div class="input-group-append">
  35.                 <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
  36.         <div id="container">
  37.                 <div class="dropdown-menu">
  38.                     <a class="dropdown-item" href="#">Action</a>
  39.                     <a class="dropdown-item" href="#">Another action</a>
  40.                     <a class="dropdown-item" href="#">Something else here</a>
  41.                     <a class="dropdown-item" href="#">Separated link</a>
  42.                 </div>
  43.         </div>
  44.             </div>
  45.         </div>
  46.       </div>
  47.       <!--</header>-->
  48.    
  49.  
  50.         <!-- Optional JavaScript -->
  51.         <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  52.         <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
  53.         <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  54.         <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  55.     </body>
  56. </html>


Código CSS:
Ver original
  1. header {
  2.   overflow: hidden;
  3.   background-color: #F1F1F1;
  4.   padding: 20px 10px;
  5. }
  6.  
  7. #search {
  8.   width: 70%;
  9.   align: center;
  10.   margin: 0 auto;
  11. }
  12.  
  13. i {
  14.   position: absolute;
  15.   top: 10px;
  16.   left: 7px;
  17. }
  18.  
  19. .btn-search {
  20.   width: 30px;
  21.   border: 1px solid;
  22. }
  23.  
  24. /*#container {
  25.  
  26. }*/

Última edición por saulrayados; 03/03/2020 a las 19:34