nav nav-tabs class not working with new bootstrap 4.0.0-Aplha.5

[fhs2020]

When using class "nav" and "nav-tabs" with the latest version the tabs do not work and they stay on top of each other instead of side by side like it should be. I have included two prints to show the problem.

below is is my HTML code for my page

@model  OcorrenciaDTO

@{
    var tipoUsuario = ControladorDeSessao.GetPerfil();
    var orcamentoId = 0;
}

<ul class="nav nav-tabs bordered">
    <li class="active">
        <a href="#s1" data-toggle="tab">
            <i class="fa fa-lg fa-wrench"></i>
            Equipamentos em Manutenção
        </a>
    </li>
    <li>
        <a href="#s2" data-toggle="tab">
            <i class="fa fa-lg fa-modx"></i>
            Orçamentos
        </a>
    </li>
</ul>

<div class="tab-content padding-10">
    <div class="tab-pane fade in active" id="s1">
        <!-- Lista de equipamentos em assistência -->
        <div class="row">
            <div class="col-md-12">
                @if (Model.ListaDeEquipamentoAssistencia != null)
                {
                    <div class="table-responsive">
                        <table id="tabelaAssistencia" class="table table-bordered table-condensed table-striped">
                            <thead>
                                <tr>
                                    <th>Descrição</th>
                                    <th>Marca</th>
                                    <th>Número de Série</th>
                                    <th>Status</th>
                                    <th>Data Entrada</th>
                                    <th>Data Disponibilidade</th>
                                    <th>Data Saída</th>
                                    @if (ControladorDeSessao.IsUsuarioPerfilHelpDesk())
                                    {
                                        <th>Ações</th>
                                    }
                                </tr>
                            </thead>
                            <tbody>
                                @if (Model.ListaDeEquipamentoAssistencia.Count > 0)
                                {
                                    foreach (var equipamento in Model.ListaDeEquipamentoAssistencia)
                                    {
                                        <tr class="table-responsive" data-id="@equipamento.Id">
                                            <td>
                                                @equipamento.ProdutoCliente.Produto.Descricao
                                            </td>
                                            <td>
                                                @equipamento.ProdutoCliente.Produto.Marca.Descricao
                                            </td>
                                            <td>
                                                @equipamento.ProdutoCliente.NumeroSerie
                                            </td>
                                            <td>
                                                @if (equipamento.Status.HasValue)
                                                {
                                                    @equipamento.Status.GetEnumDescription()
                                                }
                                            </td>
                                            <td>
                                                @equipamento.DataEntrada.Value.ToShortDateString()
                                            </td>
                                            <td>
                                                @if (equipamento.DataDisponibilidade.HasValue)
                                                {
                                                    @equipamento.DataDisponibilidade.Value.ToShortDateString()
                                                }
                                                else
                                                {
                                                    <span>-</span>
                                                }
                                            </td>
                                            <td>
                                                @if (equipamento.DataSaida.HasValue && equipamento.Status == eEquipamentoAssistenciaStatus.Concluido)
                                                {
                                                    @equipamento.DataSaida.Value.ToShortDateString()
                                                }
                                            </td>

                                            @if (ControladorDeSessao.IsUsuarioPerfilHelpDesk())
                                            {
                                                <td>
                                                    <button type="button" onclick="ID.ocorrencia.visualizar.onClickEditarEquipamentoAssistencia(@equipamento.Id)" class="btn btn-xs btn-info">
                                                        <i class="fa fa-edit"></i>
                                                        Editar
                                                    </button>

                                                    @if (equipamento.Status == eEquipamentoAssistenciaStatus.DisponivelParaColeta)
                                                    {
                                                        <button type="button" onclick="ID.ocorrencia.visualizar.onClickAbrirModalEquipamentoAssistencia(@equipamento.Id);" class="btn btn-xs btn-success" data-toggle="modal" data-target="#modalObservacaoFinal">
                                                            <i class="fa fa-reply-all"></i>
                                                            Concluir?
                                                        </button>
                                                    }
                                                    else if (!equipamento.DataSaida.HasValue && equipamento.Status != eEquipamentoAssistenciaStatus.Concluido)
                                                    {
                                                        <button type="button" onclick="ID.ocorrencia.visualizar.onClickDisponibilizarParaColeta(@equipamento.Id, @equipamento.OcorrenciaId)" class="btn btn-xs btn-primary">
                                                            <i class="fa fa-reply-all"></i>
                                                            Disponibilizar para coleta?
                                                        </button>
                                                    }
                                                    else if (equipamento.DataDisponibilidade.HasValue && equipamento.Status != eEquipamentoAssistenciaStatus.Concluido)
                                                    {
                                                        <button type="button" onclick="ID.ocorrencia.visualizar.onClickAbrirModalEquipamentoAssistencia(@equipamento.Id);" class="btn btn-xs btn-success" data-toggle="modal" data-target="#modalObservacaoFinal">
                                                            <i class="fa fa-reply-all"></i>
                                                            Concluir?
                                                        </button>
                                                    }

                                                </td>
                                            }
                                        </tr>

                                    }

                                }
                                else
                                {
                                    <tr>
                                        <td colspan="8">Nenhum equipamento em assistência foi encontrado.</td>
                                    </tr>
                                }
                            </tbody>
                        </table>
                    </div>
                }
            </div>
        </div>
        <br />
        @if (ControladorDeSessao.GetPerfil() != ePerfil.Cliente && ControladorDeSessao.GetPerfil() != ePerfil.ClienteUsuarioAdministrador)
        {
            if (Model.OcorrenciaStatus == eOcorrenciaStatus.Aberto || Model.OcorrenciaStatus == eOcorrenciaStatus.Respondido || Model.OcorrenciaStatus == eOcorrenciaStatus.Retorno || Model.OcorrenciaStatus == eOcorrenciaStatus.PagamentoConfirmado)
            {
                <div class="row">
                    <div class="col-md-12">
                        <button type="button" title="Adicionar equipamento em assistência" id="btnAddProduto" class="btn btn-success pull-left" onclick="ID.ocorrencia.editar.inicia()">
                            <i class="fa fa-plus"></i>
                            Adicionar equipamento
                        </button>
                    </div>
                </div>
            }
        }
    </div>
    <div class="tab-pane fade in" id="s2">
        <!--Lista de orçamentos -->
        <div class="row">
            <div class="col-md-12">
                @if (Model.ListaDeOrcamento != null)
                {
                    <div class="table-responsive">
                        <table class="table table-bordered table-condensed table-striped">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th>Responsável</th>
                                    <th>Data de Entrada</th>
                                    <th>Tipo</th>
                                    <th>Status</th>
                                    <th>Validade (Dias)</th>
                                    <th>Ações</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if (Model.ListaDeOrcamento.Count > 0)
                                {
                                    foreach (var orcamento in Model.ListaDeOrcamento)
                                    {
                                        <tr>
                                            <td width="35">
                                                <a class="btn btn-sm btn-default" rel="tooltip" title="Visualizar e imprimir orçamento" href="@Url.Action("imprimir", "orcamento", new { id = orcamento.Id })" onclick="window.open(this.href, 'mywin', 'left=20,top=20,width=700,height=500,toolbar=0,resizable=0,location=0'); return false;">
                                                    <i class="fa fa-file"></i>
                                                </a>
                                            </td>
                                            <td>
                                                @orcamento.Responsavel
                                            </td>
                                            <td>
                                                @orcamento.DataEntrada.Value.ToShortDateString()
                                            </td>
                                            <td>
                                                @orcamento.Tipo.GetEnumDescription()
                                            </td>
                                            <td>
                                                @if (orcamento.Status == eOrcamentoStatus.Aprovado)
                                                {
                                                    <span class="label label-success">Aprovado</span>
                                                }
                                                else if (orcamento.Status == eOrcamentoStatus.Reprovado)
                                                {
                                                    <span class="label label-danger">Reprovado</span>
                                                }
                                                else if (orcamento.Status == eOrcamentoStatus.AguardandoAprovacao)
                                                {
                                                    <span class="label label-default">Encaminhado</span>

                                                    if (orcamento.IsVencido)
                                                    {
                                                        <span class="label label-warning">Vencido</span>
                                                    }
                                                }
                                                else if (orcamento.Status == eOrcamentoStatus.Pago)
                                                {
                                                    <span class="label label-green">Pago</span>
                                                }
                                                else if (orcamento.Status == eOrcamentoStatus.EmGarantia)
                                                {
                                                    <span class="label label-green">Em garantia</span>
                                                }
                                            </td>
                                            <td>
                                                @orcamento.ValidadePropostaDia
                                            </td>

                                            @if (orcamento != null)
                                            {
                                                if (orcamento.EquipamentoAssistencia != null)
                                                {
                                                    if (orcamento.EquipamentoAssistencia.EmGarantia != true)
                                                    {
                                                        <td style="width: 300px;">
                                                            @if (orcamento.Status == eOrcamentoStatus.AguardandoAprovacao)
                                                            {
                                                                orcamentoId = orcamento.Id;
                                                                <button type="button" title="aprovar orçamento" class="btn btn-xs btn-success" onclick="ID.ocorrencia.visualizar.onClickAprovarReprovarOrcamento(@orcamento.OcorrenciaId, @orcamento.Id, true);">
                                                                    <i class="fa fa-thumbs-up"></i>
                                                                    Aprovar
                                                                </button>

                                                                <button type="button" title="reprovar orçamento" class="btn btn-xs btn-danger" onclick="ID.ocorrencia.visualizar.onClickReprovarOrcamento(@orcamento.OcorrenciaId, @orcamento.Id, false);" data-toggle="modal" data-target="#modalReprovadoObservacao">
                                                                    <i class="fa fa-thumbs-down"></i>
                                                                    Reprovar
                                                                </button>

                                                                if (ControladorDeSessao.IsUsuarioPerfilHelpDesk())
                                                                {
                                                                    <button type="button" rel="tooltip" data-placement="left" data-original-title="Editar orçamento" title="Editar Orçamento" class="btn btn-xs btn-default" onclick="ID.ocorrencia.visualizar.onClickEditarOrcamento(@orcamento.Id);">
                                                                        <i class="fa fa-edit"></i>
                                                                    </button>
                                                                    @*<button type="button" rel="tooltip" data-placement="left" data-original-title="Enviar orçamento" title="Enviar Orçamento" class="btn btn-xs btn-default" onclick="ID.ocorrencia.visualizar.onClickEnviarOrcamento(@orcamento.Id, @orcamento.OcorrenciaId);">
                                                                            <i class="fa fa-envelope"></i>
                                                                        </button>*@
                                                                    <button type="button" class="btn btn-xs btn-primary" rel="popover" alt="enviar orçamento por email" title="enviar orçamento por email" data-placement="top" data-original-title="<i class='fa fa-fw fa-envelope-o'></i> Destinatários" data-content="<form class='smart-form'><fieldset><section><label class='input'><i class='icon-prepend fa fa-envelope-o'></i><input type='email' id='txtEmail' name='txtEmail' value='@Model.ClienteUsuario.Email;' placeholder='E-mail'></label></section></fieldset><footer><button type='button' id='btnEnviarMail' onclick='ID.ocorrencia.visualizar.onClickEnviarOrcamento()' class='btn btn-xs btn-primary'>Enviar email</button></footer></form>" data-target="#btnEnviarMail" data-html="true">
                                                                        <i class="fa fa-envelope-o"></i>
                                                                        Email
                                                                    </button>
                                                                }
                                                            }
                                                            else if (orcamento.Pago == false && orcamento.Status != eOrcamentoStatus.Reprovado)
                                                            {
                                                                if (ControladorDeSessao.GetPerfil() == ePerfil.AdministradorSistema)
                                                                {
                                                                    <button type="button" onclick="ID.ocorrencia.visualizar.onClickMarcarOrcamentoPago(@orcamento.Id)" class="btn btn-xs btn-warning">
                                                                        <i data-original-title="enviar copia do orçamento por email" class="fa fa-reply-all"></i>
                                                                        Confirmar pagamento
                                                                    </button>

                                                                    <button type="button" class="btn btn-xs btn-primary" alt="enviar orçamento por email" title="enviar orçamento por email" rel="popover" data-placement="top" data-original-title="<i class='fa fa-fw fa-envelope-o'></i> Destinatários" data-content="<form class='smart-form'><fieldset><section><label class='input'><i class='icon-prepend fa fa-envelope-o'></i><input type='email' id='txtEmail' name='txtEmail'  title='enviar orçamento por email' value='@Model.ClienteUsuario.Email;' placeholder='E-mail'></label></section></fieldset><footer><button type='button' id='btnEnviarMail' onclick='ID.ocorrencia.visualizar.onClickEnviarOrcamento()' class='btn btn-xs btn-default'>Enviar email</button></footer></form>" data-target="#btnEnviarMail" data-html="true">
                                                                        <i class="fa fa-envelope-o"></i>
                                                                        Email
                                                                    </button>
                                                                }
                                                            }
                                                            else if (orcamento.Pago == true)
                                                            {
                                                                @*<span class="btn btn-xs btn-success">
                                                                        <i class="fa fa-money"></i>
                                                                        Pagamento confirmado
                                                                    </span>*@

                                                                <span title="pagamento foi cofirmado com sucesso!" class="label label-success">
                                                                    <i class="glyphicon glyphicon-ok"></i>
                                                                    Pagamento confirmado
                                                                </span>

                                                                if (ControladorDeSessao.GetPerfil() != ePerfil.Cliente)
                                                                {
                                                                    <button type="button" style="margin-left: 10px;" class="btn btn-xs btn-default" alt="enviar orçamento por email" title="enviar orçamento por email" rel="popover" data-placement="top" data-original-title="<i class='fa fa-fw fa-envelope-o'></i> Destinatários" data-content="<form class='smart-form'><fieldset><section><label class='input'><i class='icon-prepend fa fa-envelope-o'></i><input type='email' id='txtEmail' name='txtEmail' value='@Model.ClienteUsuario.Email;' placeholder='E-mail'></label></section></fieldset><footer><button type='button' id='btnEnviarMail' onclick='ID.ocorrencia.visualizar.onClickEnviarOrcamento()' class='btn btn-xs btn-default'>Enviar email</button></footer></form>" data-target="#btnEnviarMail" data-html="true">
                                                                        <i class="fa fa-envelope-o"></i>
                                                                        Email
                                                                    </button>
                                                                }
                                                            }
                                                        </td>
                                                    }
                                                    else
                                                    {
                                                        <td>
                                                            <span title="pagamento foi cofirmado com sucesso!" class="label label-success">
                                                                <i class="glyphicon glyphicon-ok"></i>
                                                                Equipamento em garantia
                                                            </span>
                                                        </td>
                                                    }
                                                }
                                                else
                                                {

                                                    if (orcamento.Status == eOrcamentoStatus.AguardandoAprovacao)
                                                    {
                                                        orcamentoId = orcamento.Id;
                                                        <td>
                                                            <button type="button" title="aprovar orçamento" class="btn btn-xs btn-success" onclick="ID.ocorrencia.visualizar.onClickAprovarReprovarOrcamento(@orcamento.OcorrenciaId, @orcamento.Id, true);">
                                                                <i class="fa fa-thumbs-up"></i>
                                                                Aprovar
                                                            </button>

                                                            <button type="button" title="reprovar orçamento" class="btn btn-xs btn-danger" onclick="ID.ocorrencia.visualizar.onClickReprovarOrcamento(@orcamento.OcorrenciaId, @orcamento.Id, false);" data-toggle="modal" data-target="#modalReprovadoObservacao">
                                                                <i class="fa fa-thumbs-down"></i>
                                                                Reprovar
                                                            </button>

                                                            @if (ControladorDeSessao.IsUsuarioPerfilHelpDesk())
                                                            {
                                                                <button type="button" rel="tooltip" data-placement="left" data-original-title="Editar orçamento" title="Editar Orçamento" class="btn btn-xs btn-default" onclick="ID.ocorrencia.visualizar.onClickEditarOrcamento(@orcamento.Id);">
                                                                    <i class="fa fa-edit"></i>
                                                                </button>
                                                                <button type="button" class="btn btn-xs btn-primary" rel="popover" alt="enviar orçamento por email" title="enviar orçamento por email" data-placement="top" data-original-title="<i class='fa fa-fw fa-envelope-o'></i> Destinatários" data-content="<form class='smart-form'><fieldset><section><label class='input'><i class='icon-prepend fa fa-envelope-o'></i><input type='email' id='txtEmail' name='txtEmail' value='@Model.ClienteUsuario.Email;' placeholder='E-mail'></label></section></fieldset><footer><button type='button' id='btnEnviarMail' onclick='ID.ocorrencia.visualizar.onClickEnviarOrcamento()' class='btn btn-xs btn-primary'>Enviar email</button></footer></form>" data-target="#btnEnviarMail" data-html="true">
                                                                    <i class="fa fa-envelope-o"></i>
                                                                    Email
                                                                </button>
                                                            }
                                                        </td>
                                                    }
                                                }
                                            }
                                        </tr>
                                    };
                                }
                                else
                                {
                                    <tr>
                                        <td colspan="8"> Nenhum orçamento foi encontrado.</td>
                                    </tr>
                                }
                            </tbody>
                        </table>
                    </div>
                }
            </div>
        </div>
        <br />
        @if (ControladorDeSessao.IsUsuarioPerfilHelpDesk())
        {
            <div class="row">
                <div class="col-md-12">
                    <button type="button" onclick="ID.ocorrencia.visualizar.onClickNovoOrcamento(@Model.Id)" class="btn btn-success pull-left">
                        <i class="fa fa-plus"></i>
                        Adicionar orçamento
                    </button>
                </div>
            </div>
        }
    </div>
</div>

<!-- modal observações de entrega de um equipamento -->
<div class="modal fade" id="modalObservacaoEntrega" tabindex="-1" role="dialog" aria-labelledby="modalObservacaoEntrega" aria-hidden="true">
    <div class="modal-dialog">
        @using (Html.BeginForm("PostEnviarObservacaoFinal", "Ocorrencia", FormMethod.Post, new { id = "observacao-coleta-form", enctype = "multipart/form-data" }))
        {
            @Html.Hidden("EquipamentoAssistenciaId")
            @Html.Hidden("OcorrenciaId", Model.Id)

            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title">Observações</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <label><span class="obrigatorio">*</span> Observações sobre a coleta do equipamento</label>
                            <div class="form-group">
                                @Html.TextArea("ObservacaoFinal", null, 4, 1, new { @class = "form-control" })
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        Fechar
                    </button>
                    <button type="submit" class="btn btn-primary" id="enviarObservacao">
                        Enviar Observações
                    </button>
                </div>
            </div>
        }
    </div>
</div>


<!-- modal observações sobre reprovação de um orçamento -->
<div class="modal fade" id="modalReprovadoObservacao" tabindex="-1" role="dialog" aria-labelledby="modalObservacaoEntrega" aria-hidden="true">
    <div class="modal-dialog">
        @using (Ajax.BeginForm("PostEnviarReprovacaoObservacao", "Orcamento", null, new AjaxOptions { HttpMethod = "Post" }, new { id = "observacao-coleta-form", enctype = "multipart/form-data" }))
        {
            @Html.Hidden("OrcamentoId", orcamentoId)
            @Html.Hidden("OcorrenciaId", Model.Id)

            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title">Observações</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <label><span class="obrigatorio">*</span> sobre detalhes porque reprovar este orçamento</label>
                            <div class="form-group">
                                @Html.TextArea("ReprovacaoObservacao", null, 4, 1, new { @class = "form-control" })
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        Fechar
                    </button>
                    <button type="submit" class="btn btn-primary" id="enviarObservacao">
                        Enviar Observações
                    </button>
                </div>
            </div>
        }
    </div>
</div>


<script type="text/javascript">
    //ID.ocorrencia.visualizar.inicia();
</script>

[Johann-S]

Possible related to : #21223 and possible fix : #21451

[mdo]

Your code snippet is far too long for us to put to use as a reduced test case. What version of Bootstrap are you using?

[fhs2020]

Right now any version below 4.0 of Bootstrap works fine. For the html code below I am using bootstrap 3.3.7

`

• Empresa
• Usuários

@* First Tab *@
<div class="tab-pane fade in active" id="s1">
    <fieldset>

    </fildset>
</div>


@* Second Tab *@
<div class="tab-pane fade" id="s2">
    <fieldset>

    </fieldset>
</div>

`

If I apply BootStrap 4.0.0 beta version the tabs will fall on top of eachother

[mdo]

Yeah, v4 has different markup for our tabs. Consult the latest alpha release and it's docs at http://v4-alpha.getbootstrap.com, or checkout the latest v4 work in the v4-dev branch, for the updated code there.