1

To começando com o bootstrap e fiz essa código para o site q estou fazendo em django

{% load static %}

{% include 'links-css.html' %}
<link rel="stylesheet" href="{% static 'scrapy/style.css' %}">

<div class="container w-50">
    <h1 class="display-4">Scrapy Data</h1>

    <!-- List group -->
    <div class="col-8 mx-auto my-5 py-5" id="Group">
        <div class="list-group">
            <div>
                <a class="list-group-item list-group-item-action mb-1 shadow-sm rounded-0" data-toggle="collapse" href="#collapseTipos" role="button" aria-expanded="true" aria-controls="collapseExample">
                    Tipos
                    <div class="d-inline">
                        <button class="btn btn-outline-success collapse" id="collapseTipos" data-parent="#Group">Scrapy</button>
                    </div>

                </a>
            </div>
            <div>
                <a class="list-group-item list-group-item-action mb-1 shadow-sm rounded-0" data-toggle="collapse" href="#collapseHab" role="button" aria-expanded="true" aria-controls="collapseExample">
                    Habilidades
                    <div class="d-inline">
                        <button class="btn btn-outline-success collapse" id="collapseHab" data-parent="#Group">Scrapy</button>
                    </div>
                </a>
            </div>
            <div>
                <a class="list-group-item list-group-item-action mb-1 shadow-sm rounded-0" data-toggle="collapse" href="#collapseCat" role="button" aria-expanded="true" aria-controls="collapseExample">
                    Categorias
                    <div class="d-inline">
                        <button class="btn btn-outline-success collapse" id="collapseCat" data-parent="#Group">Scrapy</button>
                    </div>

                </a>
            </div>
            <div>
                <a class="list-group-item list-group-item-action mb-1 shadow-sm rounded-0" data-toggle="collapse" href="#collapsePoke" role="button" aria-expanded="true" aria-controls="collapseExample">
                    Pokémons
                    <div class="d-inline">
                        <button class="btn btn-outline-success collapse" id="collapsePoke" data-parent="#Group">Scrapy</button>
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>

{% include 'links-js.html' %}

inserir a descrição da imagem aqui

Quando eu aperto um dos links(cards brancos) o botão aparece, mas eu queria coloca-lo no final desses cards.

Alguém sabe como fazer?

2
  • Como assim no final do list-item? Não ficou claro o que você quer fazer... 7/02/2019 às 22:16
  • adicionei uma imagem para ficar melhor de entender 8/02/2019 às 3:21

1 Resposta 1

0

Para resolver seu problema basta colocar duas classes do Bootstrap junto como o list-group-item vc deve acrescentar nas classes d-flex para deixar com display:flex e align-items-center para alinhar o conteúdo do list-item no centro verticalmente e justify-content-between para alinhar um elemento de cada lado do list-item, um a esquerda e outro a direita.

inserir a descrição da imagem aqui

Segue o código da imagem acima:

<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<div class="container w-50">
    <h1 class="display-4 text-center">Scrapy Data</h1>

    <!-- List group -->
    <div class="col-8 mx-auto my-5 py-5" id="Group">
        <div class="list-group">
            <div>
                <a class="list-group-item d-flex align-items-center justify-content-between list-group-item-action mb-1 shadow-sm rounded-0" data-toggle="collapse" href="#collapseTipos" role="button" aria-expanded="true" aria-controls="collapseExample">
                    Tipos
                    <div class="d-inline">
                        <button class="btn btn-outline-success collapse" id="collapseTipos" data-parent="#Group">Scrapy</button>
                    </div>

                </a>
            </div>
            <div>
                <a class="list-group-item d-flex align-items-center justify-content-between list-group-item-action mb-1 shadow-sm rounded-0" data-toggle="collapse" href="#collapseHab" role="button" aria-expanded="true" aria-controls="collapseExample">
                    Habilidades
                    <div class="d-inline">
                        <button class="btn btn-outline-success collapse" id="collapseHab" data-parent="#Group">Scrapy</button>
                    </div>
                </a>
            </div>
            <div>
                <a class="list-group-item d-flex align-items-center justify-content-between list-group-item-action mb-1 shadow-sm rounded-0" data-toggle="collapse" href="#collapseCat" role="button" aria-expanded="true" aria-controls="collapseExample">
                    Categorias
                    <div class="d-inline">
                        <button class="btn btn-outline-success collapse" id="collapseCat" data-parent="#Group">Scrapy</button>
                    </div>

                </a>
            </div>
            <div>
                <a class="list-group-item d-flex align-items-center justify-content-between list-group-item-action mb-1 shadow-sm rounded-0" data-toggle="collapse" href="#collapsePoke" role="button" aria-expanded="true" aria-controls="collapseExample">
                    Pokémons
                    <div class="d-inline">
                        <button class="btn btn-outline-success collapse" id="collapsePoke" data-parent="#Group">Scrapy</button>
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>

6
  • Obrigado cara, tava díficil de achar a solução 8/02/2019 às 15:11
  • @CAIOWANDERLEY que bom que ajudou, mas pelo que vi esses btns que se clica não estão muito responsivos, em telas pequenas vc pode ter problemas ... Pense nisso, boa sorte ai
    – hugocsl
    8/02/2019 às 15:42
  • vou tentar consertar vlw 8/03/2019 às 23:29
  • eu vi aqui, não está mesmo, alguma dica? 8/03/2019 às 23:31
  • @CAIOWANDERLEY acho que eh pela forma como o list group foi montado e o grid do bootstrap. Mas minha dica na verdade eh que vc abra uma nova pergunta e coloque o código atual desse componente que vc tenha ai. Assim a gente não mistura os assuntos aqui e não foge do escopo original dessa pergunta aqui. Então abre a pergunta nova, coloca o código atual que tem ai, explica o problema, e com certeza vão aparecer respostas pra te ajudar com esse problema, eu mesmo posso te ajudar lá com o código ;)
    – hugocsl
    9/03/2019 às 10:12

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 .