Classes nav-pills pull-right não funcionam | ASP.NET MVC 5: O framework pronto para a web

3
respostas

Referente ao curso ASP.NET MVC 5: O framework pronto para a web, no capítulo Layouts com o Twitter Bootstrap e atividade Vídeo 1

por Rodrigo Coelho

| 158.8k xp | 9 posts

Analista de Dados

As classes nav-pills e pull-right não funcionam no Google Chrome nem no Internet Explorer.

Há alguma forma de faze-las funcionar em todos os navegadores? Estou usando o bootstrap-3.1.1-dist.zip (fornecido pela link da Alura).

https://github.com/twbs/bootstrap/releases/download/v3.1.1/bootstrap-3.1.1-dist.zip

https://cursos.alura.com.br/course/desenvolvimento-web-asp-net-mvc-5/task/5083

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>_Layout</title>
    <link href="~/Content/css/bootstrap.css" rel="stylesheet" />
    <link href="~/Content/css/site.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
            <div class="header">
                <ul class="nav nav-pills pull-right">
                    <li>
                        @Html.ActionLink("Home", "Index", "Home")
                    </li>
                    <li>
                        @Html.ActionLink("Produtos", "Index", "Produto")
                    </li>
                    <li>
                        @Html.ActionLink("Categorias", "Index", "Categoria")
                    </li>
                    <li>
                        @Html.ActionLink("Usuários", "Index", "Usuario")
                    </li>
                </ul>
                <h3 class="muted-text">Estoque em MVC</h3>
            </div>

        <div id="conteudo">
            @RenderBody()
        </div>
    </div>
</body>
</html>

3 respostas

por Natan Souza

| 2092.1k xp | 3683 posts

Instrutor Product Design Lead na Alura

27/11/2018

Oi Rodrigo, tudo bem?

Nao conheço .Net, mas posso te ajudar com o Bootstrap.

Para o nav-pills funcionar cada LI precisa ter um A ali dentro:


    <ul class="nav nav-pills pull-right">
     <li>
      <a href="#">
        @Html.ActionLink("Home", "Index", "Home")
      </a>
    </li>
.....

Testei aqui e foi sucesso.

Abcs!

por Rodrigo Coelho

| 158.8k xp | 9 posts

Analista de Dados

27/11/2018

Oi Natan, O razor transforma o @Html.ActionLinks em uma A.

Mas apenas para me certificar eu testei substituindo todos eles por um A normal, mas ainda assim não funcionou.

Versão do Google Chrome: Versão 70.0.3538.110 (Versão oficial) 64 bits

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>_Layout</title>
    <link href="~/Content/css/bootstrap.css" rel="stylesheet" />
    <link href="~/Content/css/site.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
            <div class="header">
                <ul class="nav nav-pills pull-right">
                    <li>
                        <a href="#">Home</a>
                    </li>
                    <li>
                        <a href="#">Produto</a>
                    </li>
                    <li>
                        <a href="#">Categoria</a>
                    </li>
                    <li>
                        <a href="#">Usuário</a>
                        <!--@Html.ActionLink("Usuários", "Index", "Usuario")-->
                    </li>
                </ul>
                <h3 class="muted-text">Estoque em MVC</h3>
            </div>

        <div id="conteudo">
            @RenderBody()
        </div>
    </div>
</body>
</html>

Observação: No computador do meu serviço funciona no Google com a versão anterior.

por Rodrigo Coelho

| 158.8k xp | 9 posts

Analista de Dados

27/11/2018

Imagem de como fica:

https://ibb.co/R3xKxyF