1

To com dois form no meu código, e o HTML deu uma quebra de linha entre os dois. Gostaria que ambos fossem impressos um do lado do outro, para economizar espaço na tela.

Gostaria de saber como fazer isso utilizando CSS ou Bootstrap 3.

inserir a descrição da imagem aqui

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
  

<div class="panel panel-info">
    <div class="panel-heading">
        <h3 class="panel-title text-center">USUARIO, esta solicitação ainda está pendente de sua aprovação!</h3>
    </div>
    <div class="panel-body text-center">

        <form action="/Ti01/AprovaSolicitacao" method="post" novalidate="novalidate">
            <input htmlattributes="{ class = form-control, readonly = readonly }" id="CadastroID" name="CadastroID" type="hidden" value="1">
            <input type="submit" class="btn btn-success btn-finish" name="aprova" value="Aprovar">
        </form>
        <form action="/Ti01/RejeitaSolicitacao" method="post" novalidate="novalidate">
            <input htmlattributes="{ class = form-control, readonly = readonly }" id="CadastroID" name="CadastroID" type="hidden" value="1">
            <input type="submit" class="btn btn-success btn-danger" name="rejeita" value="Rejeitar">
        </form>
    </div>
</div>

2
  • Impresso que vc fala é quando for imprimir mesmo no papel, ou na tela?
    – hugocsl
    Commented 8/08/2019 às 14:27
  • Desculpa, na tela mesmo. Commented 8/08/2019 às 14:27

1 Resposta 1

3

Vc tem que usar o Grid, row>col e usar a classe text-left/right para alinhar os btns no centro.

Não precisa de CSS extra, dentro da sua panel-body vc coloca uma row, e cada form em uma col-xs-6, depois vc coloca na col a classe text-lef ou text-right para alinha o btn

inserir a descrição da imagem aqui

Segue o código abaixo

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />


<div class="panel panel-info">
    <div class="panel-heading">
        <h3 class="panel-title text-center">USUARIO, esta solicitação ainda está pendente de sua aprovação!</h3>
    </div>
    <div class="panel-body text-center">

        <div class="row">
            <div class="col-xs-6 text-right">
                <form action="/Ti01/AprovaSolicitacao" method="post" novalidate="novalidate">
                    <input htmlattributes="{ class = form-control, readonly = readonly }" id="CadastroID" name="CadastroID" type="hidden" value="1">
                    <input type="submit" class="btn btn-success btn-finish" name="aprova" value="Aprovar">
                </form>
            </div>
            <div class="col-xs-6 text-left">
                <form action="/Ti01/RejeitaSolicitacao" method="post" novalidate="novalidate">
                    <input htmlattributes="{ class = form-control, readonly = readonly }" id="CadastroID" name="CadastroID" type="hidden" value="1">
                    <input type="submit" class="btn btn-success btn-danger" name="rejeita" value="Rejeitar">
                </form>
            </div>
        </div>
    </div>
</div>

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 .