как добавить 0 заполнение только на мобильном устройстве, используя bootstrap - PullRequest
Новая
       11

как добавить 0 заполнение только на мобильном устройстве, используя bootstrap

0 голосов
/ 04 марта 2020

Я хочу padding: 0 только на мобильных sm устройствах

Я попробовал это в качестве справки, и я также попробовал приведенный ниже код, но ничего не работает

Поскольку col-*-12 имеет отступ по умолчанию 15 пикселей справа и слева, я хочу, чтобы это значение col- было ноль только для мобильных устройств.

более подробно только для мобильных устройств, заполнение должно быть нулем, и все другие устройства, которые отступ должен добавить от col-*-12

Ниже приведен короткий пример, который я пробовал:

FYI

Я могу сделать padding: 0 только на мобильном телефоне с этим классом col-lg-12 col-md-12 px-0 px-md-2, я не хочу переопределять padding-right и padding-left с col-*-12, поэтому я хочу использовать отступ от 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>

Ответы [ 2 ]

0 голосов
/ 04 марта 2020

Мобильные устройства имеют размер 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>```
0 голосов
/ 04 марта 2020

Вы можете использовать медиа-запрос: xl: min-width: 1200px, lg: min-width: 992px, md: min-width: 768px, sm: min-width: 576px, xs: min-width: 0.

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

...