如何在 Bootstrap 4 中为特定断点设置不同的边距（无 javascript）答案

【问题标题】：How to set different margins for specific breakpoints in Bootstrap 4 (no javascript)如何在 Bootstrap 4 中为特定断点设置不同的边距（无 javascript）
【发布时间】：2020-08-21 05:47:48
【问题描述】：

我浏览了一些答案并尝试了解决方案，但仍然没有得到结果。

我想在bootstrap中为不同的断点设置不同的margin——例如：

Laptop view fix, tablet view

这可能也与设置的宽度有关，但我只是不知道如何使所有内容都按宽度工作，以及如何让边距在所有屏幕尺寸上看起来都不错。

这是我的代码：

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

【问题讨论】：

标签： html css bootstrap-4 responsive-design

【解决方案1】：

仅使用 @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;
   }
}

希望对你有帮助

【讨论】：

【解决方案2】：

这个答案是使用引导的边距类

<div class="container my-md-3 mx-md-2 my-lg-5 mx-lg-4">

</div>

my-md-3表示当屏幕>= 768px时，上下边距为1rem

mx-md-2 表示当屏幕 >= 768px 时，左右边距为 .5rem

my-lg-5 表示当屏幕 >= 992px 时，上下边距为 3rem

my-lg-4表示屏幕>=992px时，左右边距为1.5rem

【讨论】：