Skip to main content
adicionou 1927 caracteres ao conteúdo
Fonte Link
pnet
  • 14,9mil
  • 34
  • 113
  • 249

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

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

Fonte Link
pnet
  • 14,9mil
  • 34
  • 113
  • 249

Posicionar botão inferior direito com angular e boostrap

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?