Foros del Web » Creando para Internet » HTML »

Evitar que pierda los estilos de Bootstrap

Estas en el tema de Evitar que pierda los estilos de Bootstrap en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 03/03/2020, 17:09
 
Fecha de Ingreso: abril-2016
Mensajes: 32
Antigüedad: 4 años
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 18:34



La zona horaria es GMT -6. Ahora son las 10:53.