Problem working with resolution with Bootstrap

Question

Problem working with resolution with Bootstrap

Navigation

#1 by (2 votes)
#2 by (0 votes)

0

Look at the image;

YoumaynoticethattheresolutionisthewayIwantittobesmall,butitpopsupwhenyougetahigherresolution.

HowcouldIfixthis?

hereistheHTMLcode

<!--INICIODOCONTEUDO--><sectionclass="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

asked by anonymous 01.08.2018 / 16:05

2 answers

0

Because I'm using admin-lte, I had to get the class col-lg-12 stayed 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-->

01.08.2018 / 19:18

How to add primary SQL Server key? When is it valid to use XACT_ABORT () in a script that is already using TRY / CATCH?

score 2 · Accepted Answer

Hello @wlandyband, the most correct fix for this type of case is .clearfix for partitions or parent elements that inherit .col , such as .col , has float: left; attribute it causes float element in a second layer and as the element that inherits the background, I believe that in your case .invoice or .content it did not have the clear: both; attribute causing you to decrease the resolution leaving the resolution of the class .col-lg it loses then the float attribute making that little bug.

To better understand the clearfix documentation link in Bootstrap v4, but also has an explanation in earlier versions.

It also follows a visually print of usage in practice.

No .clearfix

With.clearfix

Anotherlinkthatwillhelpyoubetterunderstandwhy.clearfix,whichisjustanattributeofcssclear:both;tofixthisproblem.

Example of the clear: both;