如何使用 bootstrap 仅在移动设备上添加 0 填充

Question

我希望 padding: 0 仅在移动 sm 设备上使用

我试过 this 作为参考，我也试过下面的代码，但没有任何效果

Since col-*-12 has default padding of 15px on right and left i want this col- value to be zero only on mobile.

in more detail only on mobile device the padding should be zero, and all other device the padding should add from col-*-12

下面是我试过的一个简短例子：

仅供参考

我只能用这个 class col-lg-12 col-md-12 px-0 px-md-2 在移动设备上制作 padding: 0，我不想覆盖 [=] 中的 padding-right 和 padding-left 14=]，所以我想利用 col-*-12

中的填充

<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="container-fluid bg-white shadow-sm pt-3">
  <div class="row">
    <div class="col-lg-12 col-md-12 px-4 px-sm-0">
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb shadow-sm rounded-0-sm">
          <li class="breadcrumb-item"><a href="/">Home</a></li>
          <li class="breadcrumb-item">
            <a href="/ads/car/">
              this is categroy
            </a>
          </li>
          <li class="breadcrumb-item">
            this if file name
          </li>
          <li class="breadcrumb-item text-secondary text-wrap text-break">
            cate file name
          </li>
        </ol>
      </nav>
    </div>
  </div>
</div>

Answer 1

您可以使用媒体查询： xl: 最小宽度: 1200px, lg：最小宽度：992px， md: 最小宽度: 768px, sm：最小宽度：576px， xs: 最小宽度: 0.

https://www.w3schools.com/bootstrap4/bootstrap_grid_system.asp

Answer 2

移动设备的大小为 xs 而不是 sm。

您可以使用：

<div class="container-fluid bg-white shadow-sm pt-3">
  <div class="row">

//use xs property on mobile devices
    <div class="col-lg-12 col-md-12 px-xs-0 px-sm-4">
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb shadow-sm rounded-0-sm">
          <li class="breadcrumb-item"><a href="/">Home</a></li>
          <li class="breadcrumb-item">
            <a href="/ads/car/">
              this is categroy
            </a>
          </li>
          <li class="breadcrumb-item">
            this if file name
          </li>
          <li class="breadcrumb-item text-secondary text-wrap text-break">
            cate file name
          </li>
        </ol>
      </nav>
    </div>
  </div>
</div>```

如何使用 bootstrap 仅在移动设备上添加 0 填充

how to add 0 padding only on mobile device using bootstrap

html

css

cross-platform

padding

bootstrap-4