Как установить разные поля для определенных c точек останова в Bootstrap 4 (нет javascript) - PullRequest
Новая
       72

Как установить разные поля для определенных c точек останова в Bootstrap 4 (нет javascript)

0 голосов
/ 06 мая 2020

Я просмотрел некоторые ответы и попробовал решения, но все еще не получаю результатов.

Я хочу установить разные поля для разных точек останова в bootstrap - например:

Исправление вида на ноутбуке , на планшете

Вероятно, это тоже как-то связано с установленной шириной, но я просто не знал, как заставить все работать по ширине, а также чтобы поля хорошо смотрелись на всех размерах экрана.

Это это мой код: 

.container {
  max-width: 25rem;
  text-align: center;
  padding: 0rem;
  margin: 1rem 0.4rem;
}

.table.table.table-borderless {
  margin-bottom: 0rem;
}

.table.table.table-borderless td,
.table.table-dark.table-borderless td {
  padding: 0rem;
}

table.statistic-employment,
table.statistic-requirement {
  width: 24.8rem;
}

.statistic-requirement {
  height: 10 rem;
}

.col-12.col-md-6.col-xl-4 {
  padding: 0rem 0rem;
}
<meta name="viewport" content="width=device-width, initial-scale=1.0 shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">




<div class="main-container">
  <div class="row">
    <div class="col-12 col-md-6 col-xl-4 ">
      <!--Prva kartica-->
      <div class="container">
        <table class="table table-borderless" style="background-color: thistle;">
          <tbody>
            <tr>
              <td style="font-weight: 400; font-size: 3rem;">UKUPNO</td>
            </tr>
          </tbody>
        </table>

        <table class="table table-dark table-borderless">
          <tbody>
            <tr>
              <td>Zaprimljeno zahtjeva</td>
            </tr>
            <tr>
              <td style="font-size: 5.5rem;">4979</td>
            </tr>
            <tr>
              <td>poslano</td>
            </tr>
            <tr>
              <td>17.4.2020. do 12h</td>
            </tr>
          </tbody>
        </table>

        <table class="table table-borderless" style="background-color: thistle; font-weight: 700;">
          <tr>
            <td>Osobna provjera</td>
            <td>SMS obavijest</td>
            <td>Kontakt centar</td>
          </tr>
          <tr>
            <td style="font-size: 2.5rem;">6243</td>
            <td style="font-size: 2.5rem;">2322</td>
            <td style="font-size: 2.5rem;">230</td>
          </tr>
        </table>

        <div class="statistic-employment" style="background-color: rgb(228, 224, 224); height: 11rem;">
          <h6>Po statusu zaposlenosti</h6>
          <table class="statistic-employment">
            <tr>
              <td>EMPLOYED</td>
              <td>6308</td>
            </tr>
            <tr>
              <td>PENSIONER</td>
              <td>251</td>
            </tr>
            <tr>
              <td>PENSIONER_EMPLOYED</td>
              <td>34</td>
            </tr>
            <tr>
              <td>UNEMPLOYED</td>
              <td>952</td>
            </tr>
            <tr>
              <td>UNEMPLOYED_COVID</td>
              <td>1090</td>
            </tr>
          </table>
        </div>
        <div class="statistic-requirement" style="background-color: rgb(238, 189, 223); height: 9.8rem;">

          <h6>Broj upisanih po danu</h6>

          <table class="statistic-requirement">
            <tr>
              <td>datum</td>
              <td>dan</td>
              <td>zahtjeva</td>
            </tr>

            <tr>
              <td>06.04.</td>
              <td>ponedjeljak</td>
              <td>2640</td>
            </tr>

            <tr>
              <td>07.04.</td>
              <td>utorak</td>
              <td>1205</td>
            </tr>

            <tr>
              <td>08.04.</td>
              <td>srijeda</td>
              <td>700</td>
            </tr>

          </table>
        </div>
      </div>
    </div>


    <div class="col-12 col-md-6 col-xl-4">
      <!--Druga kartica-->

      <div class="container">
        <table class="table table-borderless" style="background-color: thistle;">
          <tr>
            <td style="font-weight: 400; font-size: 3rem;">UKUPNO</td>
          </tr>
        </table>

        <table class="table table-dark table-borderless">
          <tr>
            <td>Zaprimljeno zahtjeva</td>
          </tr>
          <tr>
            <td style="font-size: 5.5rem;">4979</td>
          </tr>
          <tr>
            <td>poslano</td>
          </tr>
          <tr>
            <td>17.4.2020. do 12h</td>
          </tr>
        </table>

        <table class="table table-borderless" style="background-color: thistle; font-weight: 700;">
          <tr>
            <td>Osobna provjera</td>
            <td>SMS obavijest</td>
            <td>Kontakt centar</td>
          </tr>
          <tr>
            <td style="font-size: 2.5rem;">6243</td>
            <td style="font-size: 2.5rem;">2322</td>
            <td style="font-size: 2.5rem;">230</td>
          </tr>
        </table>

        <div class="statistic-employment" style="background-color: rgb(228, 224, 224); height: 11rem;">
          <h6>Po statusu zaposlenosti</h6>
          <table class="statistic-employment">
            <tr>
              <td>EMPLOYED</td>
              <td>6308</td>
            </tr>
            <tr>
              <td>PENSIONER</td>
              <td>251</td>
            </tr>
            <tr>
              <td>UNEMPLOYED</td>
              <td>952</td>
            </tr>
            <tr>
              <td>UNEMPLOYED_COVID</td>
              <td>1090</td>
            </tr>
          </table>
        </div>
        <div class="statistic-requirement" style="background-color: rgb(238, 189, 223);">

          <h6>Broj upisanih po satu</h6>

          <table class="statistic-requirement">
            <tr>
              <td>datum</td>
              <td>sat</td>
              <td>zahtjeva</td>
            </tr>

            <tr>
              <td>27.04.</td>
              <td>06</td>
              <td>1</td>
            </tr>

            <tr>
              <td>27.04.</td>
              <td>07</td>
              <td>3</td>
            </tr>

            <tr>
              <td>27.04.</td>
              <td>08</td>
              <td>11</td>
            </tr>
            <tr>
              <td>27.04.</td>
              <td>09</td>
              <td>26</td>
            </tr>

          </table>
        </div>
      </div>
    </div>

    <div class="col-12 col-md-6 col-xl-4">
      <!--Treca kartica-->

      <div class="container">
        <table class="table table-borderless" style="background-color: thistle;">
          <tr>
            <td style="font-weight: 400; font-size: 3rem;">UKUPNO</td>
          </tr>
        </table>

        <table class="table table-dark table-borderless">
          <tr>
            <td style="padding: 0rem">Zaprimljeno zahtjeva</td>
          </tr>
          <tr>
            <td style="font-size: 5.5rem; padding: 0rem ">4979</td>
          </tr>
          <tr>
            <td style="padding: 0rem">poslano</td>
          </tr>
          <tr>
            <td style="padding: 0rem">17.4.2020. do 12h</td>
          </tr>
        </table>

        <table class="table table-borderless" style="background-color: thistle
                        ; font-weight: 700;">
          <tr>
            <td>Osobna provjera</td>
            <td>SMS obavijest</td>
            <td>Kontakt centar</td>
          </tr>
          <tr>
            <td style="font-size: 2.5rem;">6243</td>
            <td style="font-size: 2.5rem;">2322</td>
            <td style="font-size: 2.5rem;">230</td>
          </tr>
        </table>

        <div class="statistic-employment" style="background-color: rgb(228, 224, 224); height: 11rem;">
          <h6>Po statusu zaposlenosti</h6>
          <table class="statistic-employment">
            <tr>
              <td>EMPLOYED</td>
              <td>83</td>
            </tr>
            <tr>
              <td>PENSIONER</td>
              <td>10</td>
            </tr>
            <tr>
              <td>UNEMPLOYED</td>
              <td>25</td>
            </tr>
            <tr>
              <td>UNEMPLOYED_COVID</td>
              <td>19</td>
            </tr>
          </table>
        </div>
        <div class="statistic-requirement" style="background-color: rgb(238, 189, 223);">

          <h6>Broj upisanih po satu</h6>

          <table class="statistic-requirement">
            <tr>
              <td>datum</td>
              <td>sat</td>
              <td>zahtjeva</td>
            </tr>

            <tr>
              <td>28.04.</td>
              <td>00</td>
              <td>1</td>
            </tr>

            <tr>
              <td>28.04.</td>
              <td>05</td>
              <td>2</td>
            </tr>

            <tr>
              <td>28.04.</td>
              <td>06</td>
              <td>1</td>
            </tr>
            <tr>
              <td>28.04.</td>
              <td>08</td>
              <td>14</td>
            </tr>

          </table>
        </div>
      </div>
    </div>
    <!--Row and Main-container-->
  </div>
</div>

1 Ответ

0 голосов
/ 06 мая 2020

Используйте только экран @media и (min-width:) Определите для каждого типа размера экрана нужный стиль.

Например: 

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
   .container {
       margin: 1 rem;
   }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .container {
       margin: 2 rem;
   }
}

Надеюсь, это поможет

...