Problem working with Bootstrap Resolution

Asked

Viewed 57 times

0

Look at the picture;

inserir a descrição da imagem aqui

You can see that the resolution is the way I want it is small but it bursts when it gets a higher resolution.

How could I fix this?

here is the HTML code

 <!--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-->
css

  • Qual Bootstrap?

  • 1

    Just out of curiosity. What was the tool you used to create Ani gif? (I will delete this comment if the author does not reply)

  • 2

    I am using this site :P https://convertio.co/pt/mp4-gif/ kkkk

  • 1

    @Leandrade just corrected, I took out the CSS class col-lg-12

  • Which version of Bootstrap are you using? Do you have any CSS in this table besides the Bootstrap default? If you have include in the ok question.

  • 1

    @hugocsl I’m sorry I didn’t mention, but I don’t know if you’ve been following the comments but I’ve solved the problem. I’m using the admin-lte

  • Oh cool then! Try to create an answer to your own question. That way in after days if I’m not mistaken you can mark your own answer as accepted and it is no longer as a reply pending on the site.

  • Thank you @hugocsl

Show 3 more comments

2 answers

2


Hello @wlandyband, the right fix for this type of case is .clearfix for the partitions or parent elements that inherit the .col, how the .col, has attribute float: left; it causes the element to float in a second layer and as the element that inherits the background, I believe in your case the .invoice or .content he didn’t have the attribute clear: both; causing when you decrease the resolution by leaving the class resolution .col-lg he then lost the flotation attribute making this small bug.

To better understand follows clearfix documentation link in Bootstrap v4, but it also has the explanation in previous versions.

Also follows a visual print of the use in practice.

Sem . clearfix

With . clearfix

Another link that will help you better understand why you use .clearfix, which is just a css attribute clear: both; to fix this problem.

Example of clear:Both attribute;

0

Why am I using the admin-Te had to take the class col-lg-12 was like this

<!--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-->

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.