1

inserir a descrição da imagem aqui

não estou conseguindo tirar essa separação que está ao lado do adicionar carrinho.

codigo html:

<div class="container">
    <div class="row">
                <div class="item">
                    <div class="row">
                    <div class="col-sm-4 col-md-12 col-lg-3 mt-3 mb-3">
                            <div class="col-item">
                                <div class="photo">
                                    <img src="http://placehold.it/350x260" class="img-responsive" alt="a" />
                                </div>
                                <div class="info">
                                    <div class="row">
                                        <div class="price col-md-12">
                                            <h5 class="text-center mb-2">
                                                Produto 1</h5>
                                            <h5 class="price-text-color text-center mb-3">
                                                R$199.99</h5>
                                        </div>     
                                    </div>
                                    <div class="separator clear-left">
                                        <p class="btn-add mt-4 ml-5">
                                            <i class="fa fa-shopping-cart"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">Adicionar ao Carrinho</a></p>
                                    </div>
                                    <div class="clearfix">
                                    </div>
                                </div>
                            </div>
                        </div>
                       <div class="col-sm-4 col-md-12 col-lg-3 mt-3 mb-3">
                            <div class="col-item">
                                <div class="photo">
                                    <img src="http://placehold.it/350x260" class="img-responsive" alt="a" />
                                </div>
                                <div class="info">
                                    <div class="row">
                                        <div class="price col-md-12">
                                            <h5 class="text-center mb-2">
                                                Produto 1</h5>
                                            <h5 class="price-text-color text-center mb-3">
                                                R$199.99</h5>
                                        </div>     
                                    </div>
                                    <div class="separator clear-left">
                                        <p class="btn-add mt-4 ml-5">
                                            <i class="fa fa-shopping-cart"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">Adicionar ao Carrinho</a></p>
                                    </div>
                                    <div class="clearfix">
                                    </div>
                                </div>
                            </div>
                        </div>
                       <div class="col-sm-4 col-md-12 col-lg-3 mt-3 mb-3">
                            <div class="col-item">
                                <div class="photo">
                                    <img src="http://placehold.it/350x260" class="img-responsive" alt="a" />
                                </div>
                                <div class="info">
                                    <div class="row">
                                        <div class="price col-md-12">
                                            <h5 class="text-center mb-2">
                                                Produto 1</h5>
                                            <h5 class="price-text-color text-center mb-3">
                                                R$199.99</h5>
                                        </div>     
                                    </div>
                                    <div class="separator clear-left">
                                        <p class="btn-add mt-4 ml-5">
                                            <i class="fa fa-shopping-cart"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">Adicionar ao Carrinho</a></p>
                                    </div>
                                    <div class="clearfix">
                                    </div>
                                </div>
                            </div>
                        </div>
                       <div class="col-sm-4 col-md-12 col-lg-3 mt-3 mb-3">
                            <div class="col-item">
                                <div class="photo">
                                    <img src="http://placehold.it/350x260" class="img-responsive" alt="a" />
                                </div>
                                <div class="info">
                                    <div class="row">
                                        <div class="price col-md-12">
                                            <h5 class="text-center mb-2">
                                                Produto 1</h5>
                                            <h5 class="price-text-color text-center mb-3">
                                                R$199.99</h5>
                                        </div>     
                                    </div>
                                    <div class="separator clear-left">
                                        <p class="btn-add mt-4 ml-5">
                                            <i class="fa fa-shopping-cart"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">Adicionar ao Carrinho</a></p>
                                    </div>
                                    <div class="clearfix">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

css:

.col-item
{
    border: 1px solid #E1E1E1;
    border-radius: 5px;
    background: #FFF;
}
.col-item .photo img
{
    margin: 0 auto;
    width: 100%;
}

.col-item .info
{
    padding: 10px;
    border-radius: 0 0 5px 5px;
    margin-top: 1px;
}

.col-item:hover .info {
    background-color: #F5F5DC;
}
.col-item .price
{
    /*width: 50%;*/
    float: left;
    margin-top: 5px;
}

.col-item .price h5
{
    line-height: 20px;
    margin: 0;
}

.price-text-color
{
    color: #219FD1;
}


.col-item .separator
{
    border-top: 1px solid #E1E1E1;
}

.clear-left
{
    clear: left;
}
.col-item .btn-add
{
    width: 50%;
    float: left;
}

.col-item .btn-add
{
    border-right: 1px solid #E1E1E1;

}

.col-item .btn-details
{
    width: 50%;
    float: left;
    padding-left: 10px;
}
.controls
{
    margin-top: 20px;
}
[data-slide="prev"]
{
    margin-right: 10px;
}

Estou usando bootstrap 4.1.3

4
  • Margem da esquerda ou da direita?
    – hugocsl
    1/10/2018 às 23:37
  • o da direita é essa separação ao lado do texto adicionar carrinho.
    – Felipe
    1/10/2018 às 23:38
  • ah e @hugocsl valeu eu procurei bastante sobre esse negocio de grid e consegui entender certinho mt obrigado mesmo pela dica, é essencial.
    – Felipe
    1/10/2018 às 23:45
  • Rapaz é MUITO importante sim, e não é complicado, basta assistir uns videozinhos que tem por ai que o povo explica quase tudo. Para trabalhar com esses frameworks vc tem que saber como o Grid deles funciona, é o ponto chave para montar os layout da forma correta! Que bom que te serviu de fonte de estudos :)
    – hugocsl
    1/10/2018 às 23:47

1 Resposta 1

1

Para tira essa linha que faz o separado basta vc remover a class essa classe do elemento. Deixei apenas no último elemento para vc pode visualizar com e sem a borda

.col-item .btn-add
{
    border-right: 1px solid #E1E1E1;
}

Veja como fica depois que remove ela do elemento

.col-item {
    border: 1px solid #E1E1E1;
    border-radius: 5px;
    background: #FFF;
}
.col-item .photo img
{
    margin: 0 auto;
    width: 100%;
}

.col-item .info
{
    padding: 10px;
    border-radius: 0 0 5px 5px;
    margin-top: 1px;
}

.col-item:hover .info {
    background-color: #F5F5DC;
}
.col-item .price
{
    /*width: 50%;*/
    float: left;
    margin-top: 5px;
}

.col-item .price h5
{
    line-height: 20px;
    margin: 0;
}

.price-text-color
{
    color: #219FD1;
}


.col-item .separator
{
    border-top: 1px solid #E1E1E1;
}

.clear-left
{
    clear: left;
}
.col-item .btn-add
{
    width: 50%;
    float: left;
}

.col-item .btn-add
{
    /* bastar tirar essa borda */
     border-right: 1px solid #E1E1E1; 

}

.col-item .btn-details
{
    width: 50%;
    float: left;
    padding-left: 10px;
}
.controls
{
    margin-top: 20px;
}
[data-slide="prev"]
{
    margin-right: 10px;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

    
    <div class="container">
        <div class="row">
                    <div class="item">
                        <div class="row">
                        <div class="col-sm-4 col-md-12 col-lg-3 mt-3 mb-3">
                                <div class="col-item">
                                    <div class="photo">
                                        <img src="http://placehold.it/350x260" class="img-responsive" alt="a" />
                                    </div>
                                    <div class="info">
                                        <div class="row">
                                            <div class="price col-md-12">
                                                <h5 class="text-center mb-2">
                                                    Produto 1</h5>
                                                <h5 class="price-text-color text-center mb-3">
                                                    R$199.99</h5>
                                            </div>     
                                        </div>
                                        <div class="separator clear-left">
                                            <p class=" mt-4 ml-5">
                                                <i class="fa fa-shopping-cart"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">Adicionar ao Carrinho</a></p>
                                        </div>
                                        <div class="clearfix">
                                        </div>
                                    </div>
                                </div>
                            </div>
                           <div class="col-sm-4 col-md-12 col-lg-3 mt-3 mb-3">
                                <div class="col-item">
                                    <div class="photo">
                                        <img src="http://placehold.it/350x260" class="img-responsive" alt="a" />
                                    </div>
                                    <div class="info">
                                        <div class="row">
                                            <div class="price col-md-12">
                                                <h5 class="text-center mb-2">
                                                    Produto 1</h5>
                                                <h5 class="price-text-color text-center mb-3">
                                                    R$199.99</h5>
                                            </div>     
                                        </div>
                                        <div class="separator clear-left">
                                            <p class=" mt-4 ml-5">
                                                <i class="fa fa-shopping-cart"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">Adicionar ao Carrinho</a></p>
                                        </div>
                                        <div class="clearfix">
                                        </div>
                                    </div>
                                </div>
                            </div>
                           <div class="col-sm-4 col-md-12 col-lg-3 mt-3 mb-3">
                                <div class="col-item">
                                    <div class="photo">
                                        <img src="http://placehold.it/350x260" class="img-responsive" alt="a" />
                                    </div>
                                    <div class="info">
                                        <div class="row">
                                            <div class="price col-md-12">
                                                <h5 class="text-center mb-2">
                                                    Produto 1</h5>
                                                <h5 class="price-text-color text-center mb-3">
                                                    R$199.99</h5>
                                            </div>     
                                        </div>
                                        <div class="separator clear-left">
                                            <p class=" mt-4 ml-5">
                                                <i class="fa fa-shopping-cart"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">Adicionar ao Carrinho</a></p>
                                        </div>
                                        <div class="clearfix">
                                        </div>
                                    </div>
                                </div>
                            </div>
                           <div class="col-sm-4 col-md-12 col-lg-3 mt-3 mb-3">
                                <div class="col-item">
                                    <div class="photo">
                                        <img src="http://placehold.it/350x260" class="img-responsive" alt="a" />
                                    </div>
                                    <div class="info">
                                        <div class="row">
                                            <div class="price col-md-12">
                                                <h5 class="text-center mb-2">
                                                    Produto 1</h5>
                                                <h5 class="price-text-color text-center mb-3">
                                                    R$199.99</h5>
                                            </div>     
                                        </div>
                                        <div class="separator clear-left">
                                            <p class="btn-add mt-4 ml-5">
                                                <i class="fa fa-shopping-cart"></i><a href="http://www.jquery2dotnet.com" class="hidden-sm">Adicionar ao Carrinho</a></p>
                                        </div>
                                        <div class="clearfix">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

3
  • vlw hugo, vc poderia me dar um exemplo estou meio perdido de como adicionar um carousel nesses itens .
    – Felipe
    1/10/2018 às 23:53
  • se tiver como ficarei grato, pelo menos por onde eu possa começar.
    – Felipe
    1/10/2018 às 23:53
  • @Felipe Cara eu nunca coloquei esses cards dentro de um carrocel! Nem sei se tem algo sobre isso na documentação. Mas aqui tem um exemplo próximo disso só que eram com 3 imagens... Leia o que eu escreve lá pq tem alguns detalhes quanto a responsividade etc... pt.stackoverflow.com/questions/331103/… e também procure no Google por "card carousel bootstrap 4" eu já vi que por ai tens uns tutoriais sobre isso, talvez até melhor que o exemplo da minha resposta que citei ai
    – hugocsl
    1/10/2018 às 23:57

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .