0

Observem a imagem;

inserir a descrição da imagem aqui

Vocês podem perceber que a resolução fica do jeito que eu quero com ela está pequena porém ela estoura quando fica com uma resolução maior.

Como eu poderia corrigir isso?

aqui está o código HTML

 <!--INICIO DO CONTEUDO-->
 <section class="content-header">
   <h1>Lista de Restaurantes</h1>
</section>

<section class="content">
  <section class="invoice">

    <form >
      <div class="col-lg-12" >

              <table class="table table-hover">
                  <thead class="thead-default">
                    <tr>
                      <th>Nome</th>
                      <th>Ano</th>
                      <th>Ação</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr *ngFor="let restaurant of restaurants">
                      <td>{{ restaurant.name }}</td>
                      <td>{{ restaurant.category }}</td>
                      <td>
                        botão
                      </td>
                    </tr>
                  </tbody>
              </table>
        </div>
      </form>

  </section>
</section>
<!-- FIM DO CONTEUDO-->
8
  • Qual Bootstrap?
    – LeAndrade
    1/08/2018 às 14:14
  • 1
    Só por curiosidade. Qual foi a ferramenta que você usou para criar o ani gif? (vou deletar este comentário se o autor não responder) 1/08/2018 às 14:15
  • 2
    eu estou usando esse site :P https://convertio.co/pt/mp4-gif/ kkkkkk
    – user10264
    1/08/2018 às 14:26
  • 1
    @LeAndrade acabei de corrigir, eu tirei a classe CSS col-lg-12
    – user10264
    1/08/2018 às 14:28
  • 1
    @hugocsl me desculpe não ter mencionado, mas eu não sei se você tem acompanhado os comentários mas eu já resolvi o problema. Eu estou usando o admin-lte
    – user10264
    1/08/2018 às 16:56

2 Respostas 2

1

Olá @wlandyband, a correção mais certa para este tipo de caso é .clearfix para as divisórias ou elementos pais que herdam os .col, como os .col, possui atributo float: left; ele faz que flutue o elemento numa segunda camada e como o elemento que herda o background, creio que no seu caso o .invoice ou .content ele não tinha o atributo clear: both; fazendo que quando você diminuísse a resolução saindo da resolução da class .col-lg ele perdesse então o atributo de flutuação fazendo esse pequeno bug.

Para entender melhor segue link da documentação do clearfix no Bootstrap v4, porém também tem a explicação nas versões anteriores.

Segue também um print visualmente do uso em prática.

Sem .clearfix

Com .clearfix

Outro link que irá ajudar a entender melhor o por que do uso do .clearfix, que é apenas um atributo do css clear: both; para corrigir esse problema.

Exemplo do atributo clear:both;

0

Por eu está usando o admin-lte tive que tirar a classe col-lg-12 ficou assim

<!--INICIO DO CONTEUDO-->
 <section class="content-header">
   <h1>Lista de Restaurantes</h1>
</section>

<section class="content">
  <section class="invoice">



              <table class="table table-hover">
                  <thead class="thead-default">
                    <tr>
                      <th>Nome</th>
                      <th>Ano</th>
                      <th>Ação</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr *ngFor="let restaurant of restaurants">
                      <td>{{ restaurant.name }}</td>
                      <td>{{ restaurant.category }}</td>
                      <td>
                        botão
                      </td>
                    </tr>
                  </tbody>
              </table>

  </section>
</section>
<!-- FIM DO CONTEUDO-->

Você deve fazer log-in para responder a esta pergunta.