Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Dúvida no Ex. 5 da Aula 7 - Criando página de produto

A navegação das tabs fica posicionada abaixo do botão, mas o conteúdo fica posicionado abaixo da foto e não ao seu lado como deveria. Segue o Html abaixo:

`````````

Camisa azul importada com tecido de microfibra de alta densidade com diversas certificações internacionais de qualidade. Comercializada somente em lojas de alta grife.

Camisa meia manga com decote e perfeito caimento, produzida com algodão importado.

Tamanhos P, M, G, GG Cores Azul, Verde, Amarela Origem Itália ````````
2 respostas

Fala Márcio, blz?

Você poderia postar o código inteiro do body aqui por gentileza?

solução!

Obrigado pela resposta Natan.

Já consegui resolver.

Estava faltando adicionar uma classe para dizer que as "tabs" deveriam ocupar as colunas que restavam ao lado da foto do produto.

A foto do produto ocupa 4 colunas. Possui a classe: "col-md-4" Então as "tabs" e demais informações devem ocupar 8 colunas para completar as 12 colunas do grid do Bootstrap.

Para isso é só aplicar a classe: "col-md-8"

Eu apliquei "col-md-7 col-md-offset-1" .

O "col-md-offset-1" move o conteúdo colocando-o a uma coluna de distância.

O código ficou assim:

<div class="row wow fadeInLeft" data-wow-delay="0.5s">
                <div class="text-center col-md-4">
                    <img class="img-responsive img-thumbnail" src="img/produto-grande.png" alt="camisa azul importada"/>
                </div>
                <div class="text-center col-md-7 col-md-offset-1 texto-produto ">
                    <h1>Camiseta Azul Italiana</h1>
                    <h3>R$ 229,00</h3>
                    <a href="#" class="btn btn-primary btn-lg col-md-4 col-md-offset-4 col-xs-6 col-xs-offset-3">Comprar</a>
                </div>

                <div class="row col-md-7 col-md-offset-1">
                    <ul class="nav nav-tabs">
                        <li class="nav active"><a href="#descricao" data-toggle="tab">Descrição</a></li>
                        <li class="nav"><a href="#tecnica" data-toggle="tab">Informações Técnicas</a></li>
                    </ul>

                    <div class="tab-content">
                        <div class="tab-pane fade in active" id="descricao">
                            <p>
                                Camisa azul importada com tecido de microfibra de alta densidade com diversas certificações internacionais de qualidade.
                                Comercializada somente em lojas de alta grife.
                            </p>
                            <p>
                                Camisa meia manga com decote e perfeito caimento, produzida com algodão importado.
                            </p>
                        </div>

                        <div class="tab-pane fade " id="tecnica">
                            <table class="table table-hover table-responsive">
                                <tr>
                                    <td>Tamanhos</td>
                                    <td>P, M, G, GG</td>
                                </tr>
                                <tr>
                                    <td>Cores</td>
                                    <td>Azul, Verde, Amarela</td>
                                </tr>
                                <tr>
                                    <td>Origem</td>
                                    <td>Itália</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>