modal alinhar colunas de valores

[Diomedes Amparo]

olá amigos

Bom dia

como faço para alinhar a direita as colunas de valores, já tentei varias formas e as duas ultimas coluna não saem alinhadas (também nem sei se esta é a forma correta mas...), abaixo detalhes das <div>.

<div class="modal fade" id="ModalPedido{{bds.0}}" tabindex="-1" role="dialog" aria-labelledby="LabelModalVer" aria-hidden="true">

    <div class="modal-dialog modal-lg" role="document">

        <div class="modal-content">

            <div class="modal-header modal-lg">

                <h5 class="modal-title" id="LabelModalVer">Pedido: {{bds.1}}</h5>

                <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">

                <span aria-hidden="true">&times;</span>

                </button>

            </div>

            <div class="modal-body modal-lg">

              <h5 class="modal-body" id="LabelModalVer">ITENS DO PEDIDO</h5>

                <div class="container text-center">

                    <div class="row">

                        <div class="col-2 text-left">

                            código

                        </div>

                        <div class="col-7 text-left">

                             Descrição

                        </div>

                        <div class="col-1 text-right">

                            Qtde

                        </div>

                              <div class="col-1">

                                  Unitário

                              </div>

                              <div class="col-1 text-right">

                                  Total

                              </div>

                              <hr>

                         </div>

                    </div>

                    {% for itens in itens_pedidos %}

                      {% if bds.1 == itens.1 %}

                          <ul class="list-group">

                              <li class="list-group-item d-flex" style="padding: 3px 0em 0 1em;">

                              <div class="container">

                                  <div class="row">

                                        <div class="col-2 text-left">

                                            {{itens.12}}

                                        </div>

                                        <div class="col-7 text-left">

                                            {{itens.16}}

                                        </div>

                                        <div class="col-1 text-right" style="text-align: left;">

                                            {{itens.13}}

                                        </div>

                                        <div class="col-1 text-right" style="text-align: left; width: 12%;">

                                            {{itens.14}}

                                        </div>

                                        <div class="col-1 text-right" style="text-align: right; width: 2%;">

                                            {{itens.15}}

                                        </div>

                                    </div>

                              </div>

                          </li>

                          </ul>

                       {% endif%}

                    {% endfor %}

               </div>

          <div class="modal-footer modal-lg">

          <span class="badge bg-secondary" data-dismiss="modal"><a href="#" style="color: rgb(248, 243, 243); font-size: 150%;">Fechar</a></span>

            <span class="badge bg-danger"><a href="#" style="color: rgb(248, 243, 243); font-size: 150%;">Comprar Novamente</a></span>

               </div>

          </div>

     </div>

</div>

[NiO Éter NO]

Olá amigo, bom dia, tente jogar este código no chat gpt ou no Gemini e ao final escreva "alinheinhe a coluna unitário e total à direita" e depois teste o código e veja se está coerente... A ia me ajuda muito por aqui.

--
Você recebeu essa mensagem porque está inscrito no grupo "Django Brasil" dos Grupos do Google.
Para cancelar inscrição nesse grupo e parar de receber e-mails dele, envie um e-mail para django-brasi...@googlegroups.com.
Para ver esta conversa, acesse https://groups.google.com/d/msgid/django-brasil/a38189d9-1201-493b-a667-71404993347dn%40googlegroups.com.

[NiO Éter NO]

*alinhe a coluna...

[NiO Éter NO]

Algo assim... Olá chat, bom dia... alinhe à direita a coluna Unitário e Total à direita por favor:

Resposta:
Para alinhar à direita as colunas Unitário e Total no modal, você pode ajustar o código HTML adicionando as classes text-right e garantindo que os estilos CSS sejam aplicados corretamente. Abaixo está o código atualizado:

Código Atualizado

<div class="modal fade" id="ModalPedido{{bds.0}}" tabindex="-1" role="dialog" aria-labelledby="LabelModalVer" aria-hidden="true">
     <div class="modal-dialog modal-lg" role="document">
          <div class="modal-content">
               <div class="modal-header modal-lg">
                    <h5 class="modal-title" id="LabelModalVer">Pedido: {{bds.1}}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
                                <span aria-hidden="true">&times;</span>
                        </button>
               </div>
               <div class="modal-body modal-lg">
                    <h5 class="modal-body" id="LabelModalVer">ITENS DO PEDIDO</h5>
                    <div class="container text-center">
                         <div class="row">
                              <div class="col-2 text-left">
                                   código
                              </div>
                              <div class="col-7 text-left">
                                   Descrição
                              </div>
                              <div class="col-1 text-right">
                                   Qtde
                              </div>

                              <div class="col-1 text-right">

                                   Unitário
                              </div>
                              <div class="col-1 text-right">
                                   Total
                              </div>
                              <hr>
                         </div>
                    </div>
                    {% for itens in itens_pedidos %}
                       {% if bds.1 == itens.1 %}
                          <ul class="list-group">
                              <li class="list-group-item d-flex" style="padding: 3px 0em 0 1em;">
                                  <div class="container">
                                       <div class="row">
                                            <div class="col-2 text-left">
                                                 {{itens.12}}
                                            </div>
                                            <div class="col-7 text-left">
                                                 {{itens.16}}
                                            </div>
                                            <div class="col-1 text-right">

                                                 {{itens.13}}
                                            </div>
                                            <div class="col-1 text-right">

                                                 {{itens.14}}
                                            </div>
                                            <div class="col-1 text-right">

                                                 {{itens.15}}
                                            </div>
                                       </div>
                                  </div>
                              </li>
                          </ul>
                       {% endif %}
                    {% endfor %}
               </div>
               <div class="modal-footer modal-lg">
                    <span class="badge bg-secondary" data-dismiss="modal"><a href="#" style="color: rgb(248, 243, 243); font-size: 150%;">Fechar</a></span>
                    <span class="badge bg-danger"><a href="#" style="color: rgb(248, 243, 243); font-size: 150%;">Comprar Novamente</a></span>
               </div>
          </div>
     </div>
</div>

Alterações Realizadas:

1. Cabeçalho da tabela: Adicionei text-right às colunas Unitário e Total no cabeçalho.

2. Linhas de itens: Adicionei text-right nas colunas correspondentes às variáveis {{itens.14}} (Unitário) e {{itens.15}} (Total).

Com isso, as colunas Unitário e Total ficarão alinhadas à direita corretamente. Caso precise de mais ajustes, basta avisar!

[Diomedes Amparo]

olá amigos

amigo esse código que vc postou ATUALIZADO não tem nada de diferente do meu código.

abraço

[Marcos Thomaz]

Primeiro, inspecione pelo navegador se a classe  text-right está sendo aplicada (as vezes ela tem a formatação sobrescrita por outra classe).

Eu presumo que você esteja usando Bootstrap, mas como não daria pra saber se você sobrescreveu algo no css, complica um pouco, pois pode ser alguma personalização que está impedindo o text-right de alinhar corretamente o texto. 

Eu testei rapidamente adicionar o código que você encaminhou no JSFiddle carregando a lib do bootstrap, e funcionou o alinhamento, então, creio que seja algo fora desse trecho que enviou.

Qualquer coisa, sobe o código completo em algum playground e manda o link aqui.

Para ver esta conversa, acesse https://groups.google.com/d/msgid/django-brasil/defd23d5-e29b-4538-979b-bac6f157f389n%40googlegroups.com.

--

Marcos Thomaz da Silva

Analista de Tecnologia da Informação

[Diomedes Amparo]

olá amigos

bom dia

a solução nesse caso foi dimensionar o tamanho das div 

abraço