0

Tenho esse html

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

<div>
  <table mat-table [dataSource] = "dataSource" class="mat-elevation-z8">

     <ng-container matColumnDef="codigo">
       <th mat-header-cell *matHeaderCellDef> Codigo </th>
       <td mat-cell *matCellDef="let oper"> {{oper.operatorId}} </td>
    </ng-container>

    <ng-container matColumnDef="nome">
      <th mat-header-cell *matHeaderCellDef> Nome </th>
      <td mat-cell *matCellDef="let oper"> {{oper.name}} </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let oper; columns: displayedColumns;"></tr>
    </table>
</div>

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

Quando renderizo o botão Teste fica na lateral esquerda, mas ao lado da Table e não embaixo. Como resolvo?

1
  • 1
    você pode tentar colocar a class="row" nas divs que envolvem a tabela e o botão para que o bootstrap renderize como linhas.
    – ronssm
    11/07/2018 às 19:51

1 Resposta 1

1

Para usar o Grid do Bootstrap vc precisa usar as classes do framework. Tanto na Tabela quanto nas divs onde vc coloca os seus componentes.

Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.

Use rows to create horizontal groups of columns. Content should be placed within columns, and only columns may be immediate children of rows.

As linhas devem ser colocadas dentro de um .container (largura fixa) ou .container-fluid (largura total) para alinhamento e preenchimento adequados.

Use rows para criar grupos horizontais de colunas. O conteúdo deve ser colocado dentro de colunas e somente cols podem ser filhos imediatos de .rows.

Veja no modelo abaixo as classes que usei para formatar o layout das divs

Documentação oficial da tabela https://getbootstrap.com/docs/3.3/css/#tables

Documentação oficial do Grid https://getbootstrap.com/docs/3.3/css/#grid

    <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">
                <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">Primary</button>
            </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 .