1

Uso stripped table do bootstrap com Angular 6. Essa é a tela: inserir a descrição da imagem aqui

Veja que tem um botão mais no canto superior esquerdo e ele deveria estar embaixo da table, lado direito. Esse é o meu html

<nav class="navbar navbar-dark bg-dark">
    <a style="display: block; width: 100%; text-align: center; margin: 0;" class="navbar-brand" href="#">SISTEMA ATLAS</a>

    <div>
        <button type="button" class="btn btn-primary">Primary</button>
    </div>
    <div>
        <button type="button" class="btn btn-success">Success</button>
    </div>

  </nav>

<div>
  <table class="table table-striped">
      <thead>
          <tr>
              <th>Código</th>
              <th>Nome</th>
          </tr>
      </thead>
      <!--Table head-->

      <!--Table body-->
      <tbody>
          <tr *ngFor="let operator of dataSource">
              <td>{{ operator.operatorId }}</td>
              <td>{{ operator.name }}</td>
            </tr>
      </tbody>
  </table>

</div>
<div>
  <button type="button" class="btn btn-primary btn-xs row">+</button>
</div>

como eu posiciono o botão mais no canto inferior direito?

EDIT1

veja como ficou meu novo html e mesmo assim, enviar não vai pra baixo da table, aliás, não consigo posicionar nada embaixo da table.

<nav class="navbar navbar-dark bg-dark col-sm-12">
  <!-- <a style="display: block; width: 100%; text-align: center; margin: 0;" class="navbar-brand" href="#">SISTEMA ATLAS</a>  -->
  <div class="col-md-11">
      <button type="button" class="btn btn-primary btn-xs pull-right">Teste</button>
  </div>
  <div class="col-md-1">
      <button type="button" class="btn btn-success pull-right">Novo</button>
  </div>
</nav>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
        <table class="table table-striped table-bordered">
            <thead>
                <tr>
                    <th>Código</th>
                    <th>Nome</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let operator of dataSource">
                    <td>{{ operator.operatorId }}</td>
                    <td>{{ operator.name }}</td>
                  </tr>
            </tbody>
        </table>

      </div>
</div>
</div>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th><button type="button" class="btn btn-success pull-right">Enviar</button></th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

No screenshot abaixo, consigo mostrar como ficou o botão Enviar inserir a descrição da imagem aqui

1 Resposta 1

1

Vc tem que usar as classes do Bootstrap para tudo ficar alinhado como falei na sua outra pergunta.

A classe para alinhar o btn a direita é a pull-right original do BS.

Aqui está a documentação oficial dos floats do Bootstrap https://getbootstrap.com/docs/3.3/css/#helper-classes-floats

Além disso, vc precisa usar as classes do grid para "encapsular" os componentes no grid e ter o flow correto dos elementos na página

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

<div class="container">
    <div class="row">
        <div class="com-xs-12">
            <nav class="navbar navbar-dark bg-dark">
                <a style="display: block; width: 100%; text-align: center; margin: 0;" class="navbar-brand" href="#">SISTEMA ATLAS</a>
            
                <div>
                    <button type="button" class="btn btn-primary">Primary</button>
                </div>
                <div>
                    <button type="button" class="btn btn-success">Success</button>
                </div>
            
              </nav>
        </div>
    </div>
</div>

    <div class="container">
        <div class="row">
            <div class="com-xs-12">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Username</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th scope="row">1</th>
                            <td>Mark</td>
                            <td>Otto</td>
                            <td>@mdo</td>
                        </tr>
                        <tr>
                            <th scope="row">2</th>
                            <td>Jacob</td>
                            <td>Thornton</td>
                            <td>@fat</td>
                        </tr>
                        <tr>
                            <th scope="row">3</th>
                            <td>Larry</td>
                            <td>the Bird</td>
                            <td>@twitter</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <button type="button" class="btn btn-primary pull-right">Primary</button>
            </div>
        </div>
    </div>

4
  • hugocsl, eu não estou conseguindo nem alinhar à direita e nem jogar para baixo da table. Lembrando que uso Angular 6 para o front
    – pnet
    Commented 11/07/2018 às 20:23
  • @pnet vc tem que seguir o que diz a documentação do framework para as coisas funcionarem como devem. Por exemplo a sua div que precede a tabela não tem nenhum estilo que deveria ter. Sobre isso da uma olhada na outra pergunta que tem mais detalhes. Independente disso, o Angula não interfere nisso, desde que vc use as classes corretas nos elementos certos.
    – hugocsl
    Commented 11/07/2018 às 20:27
  • Fiz uma nova edição no post
    – pnet
    Commented 12/07/2018 às 15:00
  • 1
    @pnet vc testou seu código em algum documento novo em branco só com o Bootstrap? Eu fiz o testei aqui e está tudo normal com o código, fica tudo alinhado 100% sem problemas. Vc tem algum outro CSS nesse sistema? Muito provavelmente tem alguma outra classe afetando sua tabela ou o button algum estilo tipo "table{ display:absolut} " ou algo assim... Vc pode inspecionar a tabela pelo DevTools e verificar quais CSS estão afetando o elemento
    – hugocsl
    Commented 12/07/2018 às 15:29

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 .