Dropdown goes blank with Bootstrap

Asked

Viewed 59 times

0

After application of Bootstrap the dropdown was blank , I do not know how to proceed.

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- As 3 meta tags acima *devem* vir em primeiro lugar dentro do `head`; qualquer outro conteúdo deve vir *após* essas tags -->
    <title>POP ART</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="../Home/css/CSS.css" rel="stylesheet">

    <!-- HTML5 shim e Respond.js para suporte no IE8 de elementos HTML5 e media queries -->
    <!-- ALERTA: Respond.js não funciona se você visualizar uma página file:// -->
    <!-- ALERTA: Respond.js não funciona se você visualizar uma página file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class-"conteiner-fluid">


        <div class="row">

            <div class="col-md-12">

                <form id="search-form" class="form-inline" role="form" method="post" action="//www.google.com/search" target="_blank">
                <div class="input-group">
                    <input type="text" class="form-control search-form" placeholder="">
                    <!--DO NOT NEED TRAILING SLASH "/" As HTML5 FORMS SLASHES ARE NO LONGER REQUIRED--> <span class="input-group-btn"><button type="submit" class="btn btn-primary search-btn" data-target="#search-form" name="q"><i class="fa fa-search"><span class="glyphicon glyphicon-search"></span></i>
                    </button></span>

                </div>

            </div>


        </div>


        <div class="row">

                <div class="col-md-4">
                    <div id="logo">
                    <a href="Home.html" title="Home"> <img src="imagem/logo1.png" alt= "erro" title="logo"> </a></div>

                </div>


                <div class="col-md-8">
                    <div class="menu1">
                        <nav1>
                            <ul>                    
                                <li><a href="#">Sobre</a></li>
                                <li><div class="dropdown">
                                      <button class="dropbtn">Artistas</button>
                                      <div class="dropdown-content">
                                        <a href="#">Andy Warhol</a>
                                        <a href="#">Yayoi Kusama</a>
                                        <a href="#">Roy Lichtenstein</a>
                                        <a href="#">Robert Rauschenberg</a>
                                        <a href="#">Charles Fazzino</a>
                                        <a href="#">Romero Britto</a>
                                      </div> </div> </li>
                                <li><a href="#">Eventos</a></li>
                                <li><a href="#">Você Pop-Artista!</a></li>
                                <li><a href="#">Quem Somos</a></li>
                            </ul>
                        </nav1>
                    </div>

                </div>  
        </div>



        <div class="row">

            <div class="col-md-12">

                <div id="myCarousel" class="carousel slide" data-ride="carousel">
              <!-- Indicators -->
              <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
              </ol>

              <!-- Wrapper for slides -->

            <div class="carousel-inner">
                <div class="item active">
                  <img src="imagem/header1.png" alt="1">
                  <div class="carousel-caption box1">
                    <div class="popart">O que é<p>Pop Art?</p></div>
                    <div class="mais"><a href="#">Saiba mais</a></div>
                  </div>
                </div>

            <div class="item">
              <img src="imagem/header2.png" alt="1">
              <div class="carousel-caption box1">
                <div class="popart">O que é<p>Pop Art?</p></div>
                <div class="mais"><a href="#">Saiba mais</a></div>
              </div>
            </div>

            <div class="item">
              <img src="imagem/header3.png" alt="3">
              <div class="carousel-caption box1">
                <div class="popart">O que é<p>Pop Art?</p></div>
                <div class="mais"><a href="#">Saiba mais</a></div>
              </div>
            </div>
      </div>


              <!-- Left and right controls -->
              <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                <!--<span class="glyphicon glyphicon-chevron-left"></span>
                <span class="sr-only">Previous</span>-->
              </a>
              <a class="right carousel-control" href="#myCarousel" data-slide="next">
                <!--<span class="glyphicon glyphicon-chevron-right"></span>
                <span class="sr-only">Next</span>-->
              </a>

            </div>

            </div>

        </div>


        <div class="row">

            <div class="col-md-12">
                <div class= "artistasobras">OS ARTISTAS E SUAS OBRAS</div>


            </div>

        </div>


        <div class="row">

            <div class="col-md-12">


                <div class="container">

                    <div class="carousel slide media-carousel" id="media">
                        <div class="carousel-inner">
                          <div class="item  active">
                            <div class="row">
                              <div class="col-md-4">
                                <a class="thumbnail" href="#"><img alt="" src="imagem/Andy_Cir-01.png"></a>
                              </div>          
                              <div class="col-md-4">
                                <a class="thumbnail" href="#"><img alt="" src="imagem/Roy_Cir-01.png"></a>
                              </div>
                              <div class="col-md-4">
                                <a class="thumbnail" href="#"><img alt="" src="imagem/Kusama_Cir-01.png"></a>
                              </div>        
                            </div>
                          </div>
                          <div class="item">
                            <div class="row">
                              <div class="col-md-4">
                                <a class="thumbnail" href="#"><img alt="" src="imagem/Robert_Cir-01.png"></a>
                              </div>          
                              <div class="col-md-4">
                                <a class="thumbnail" href="#"><img alt="" src="imagem/Charles_Cir-01.png"></a>
                              </div>
                              <div class="col-md-4">
                                <a class="thumbnail" href="#"><img alt="" src="imagem/Britto_Cir-01.png"></a>
                              </div>        
                            </div>
                          </div>
                        </div>
                    </div>
                        <a data-slide="prev" href="#media" class="left carousel-control">‹</a>
                        <a data-slide="next" href="#media" class="right carousel-control">›</a>
                      </div>                          

                </div>


            </div>



        <div class="row">

            <div class="col-md-12">

                        <div class="tz-gallery">

                <div class="row">

                    <div class="col-sm-12 col-md-4">
                        <a class="lightbox" href="../images/bridge.jpg">
                            <img src="imagem/1.png" alt="Bridge">
                        </a>
                    </div>
                    <div class="col-sm-6 col-md-4">
                        <a class="lightbox" href="../images/park.jpg">
                            <img src="imagem/2.png" alt="Park">
                        </a>
                    </div>
                    <div class="col-sm-6 col-md-4">
                        <a class="lightbox" href="../images/tunnel.jpg">
                            <img src="imagem/3.png" alt="Tunnel">
                        </a>
                    </div>
                    <div class="col-sm-12 col-md-8">
                        <a class="lightbox" href="../images/traffic.jpg">
                            <img src="imagem/4.png" alt="Traffic">
                        </a>
                    </div>
                    <div class="col-sm-6 col-md-4">
                        <a class="lightbox" href="../images/coast.jpg">
                            <img src="imagem/5.png" alt="Coast">
                        </a>
                    </div> 
                    <div class="col-sm-6 col-md-4">
                        <a class="lightbox" href="../images/rails.jpg">
                            <img src="imagem/6.png" alt="Rails">
                        </a>
                    </div>
                    <div class="col-sm-6 col-md-4">
                        <a class="lightbox" href="../images/rails.jpg">
                            <img src="imagem/7.png" alt="Rails">
                        </a>
                    </div>

                </div>

            </div>

            </div>


        </div>



        <div class="row">

            <div class="col-md-12">



            </div>

        </div>


        <div class="row">

            <div class="col-md-12"></div>

        </div>


        <div class="row">

            <div class="col-md-6"></div>
            <div class="col-md-6"></div>

        </div>


        <div class="rowfooter">


                <div class="col-md-2">

                    <div class="mapfooter">
                        <ul>                    
                            <li><u>SOBRE</u></li>   
                            <li><a href="#">O Pop Art</a></li>
                        </ul>
                    </div>

                </div>



                <div class="col-md-2">

                    <div class="mapfooter">
                        <ul>
                            <li><u>ARTISTAS</u></li>                
                            <li><a href="#">Andy Warhol</a></li>
                            <li><a href="#">Roy Lichtenstein</a></li>
                            <li><a href="#">Robert Rauschenberg</a></li>
                            <li><a href="#">Yayoi Kusama</a></li>
                            <li><a href="#">Charles Fazzino</a></li>
                            <li><a href="#">Romero Britto</a></li>
                        </ul>
                    </div>

                </div>



                <div class="col-md-2">

                    <div class="mapfooter">
                        <ul>                    
                            <li><a href="#"><u>EVENTOS</u></a></li>
                        </ul>
                    </div>

                </div>


                <div class="col-md-2">

                    <div class="mapfooter">
                        <ul>                    
                            <li><a href="#"><u>VOCÊ POP ARTISTA!</u></a></li>
                        </ul>
                    </div>

                </div>


                <div class="col-md-2">

                    <div class="mapfooter">
                        <ul>                    
                            <li><a href="#"><u>QUEM SOMOS</u></a></li>
                        </ul>
                    </div>

                </div>



                <div class="col-md-2">

                    <div class="links">
                        <form id="search-form" class="form-inline" role="form" method="post" action="//www.google.com/search" target="_blank">
                        <div class="input-group">
                            <input type="text" class="form-control search-form" placeholder="">
                            <!--DO NOT NEED TRAILING SLASH "/" As HTML5 FORMS SLASHES ARE NO LONGER REQUIRED--> <span class="input-group-btn"><button type="submit" class="btn btn-primary search-btn" data-target="#search-form" name="q"><i class="fa fa-search"><span class="glyphicon glyphicon-search"></span></i>
                            </button></span>

                        </div>

                    </div>

                </div>



        </div>


        <div class="rowbot">

            <div class="col-md-4"></div>    
            <div class="col-md-4">
                <div class="credito">© Alunos, 2017</div>
            </div>
            <div class="col-md-4"></div>

        </div>


    </div>

    <!-- jQuery (obrigatório para plugins JavaScript do Bootstrap) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Inclui todos os plugins compilados (abaixo), ou inclua arquivos separadados se necessário -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
  • You have to put the bootstrap and jquery in the <head> of the page.

1 answer

0

Assuming the bootstrap is 3.3.7 the solution is the following, I made fiddle, just add some classes to certain elements.

https://jsfiddle.net/vg9zxcad/

NOTE: html needs some changes to get properly formatted:

<div class-"conteiner-fluid"> mudar para <div class="container-fluid">
<nav1>...</nav1> dever ser mudada para <nav></nav>

- form tags are open and not closed

Browser other questions tagged

You are not signed in. Login or sign up in order to post.