Измените Div class Col-4 на Col-6 в зависимости от медиа-запроса для конкретного div - PullRequest
Новая
       120

Измените Div class Col-4 на Col-6 в зависимости от медиа-запроса для конкретного div

0 голосов
/ 09 июля 2020

Я пытаюсь изменить класс div с Col-4 на Col-6, используя медиа-запрос для устройства iPad, чье W H равно 768 1024

мой div похож на 

 <div id="maintitle" class="col-4">
            @*<a class="nav-link py-0" href="/Home/Index">*@
                <a class="nav-link py-0" href="~/MyDevices/Index">
                    <img src="~/Images/logo.png" width="75" />
                    <strong class="h4 text-white">
                        This is Title
                    </strong>
                </a>
</div>

для дизайна я проверяю с помощью chrome инструментов разработчика, он отлично работает на iPad Pro, но в заголовке iPad переходит на вторую строку. если я изменю col-4 на col-6, он отлично работает в iPad, но не в iPad Pro.

я пробовал использовать медиа-запрос, например,

in Bootstrap. css

я просто go для любого медиа-запроса, который предопределен для этой ширины, например, 

    @media (min-width: 768px) {
      .rtl .text-md-right,
      [dir="rtl"] .text-md-right {
        text-align: left !important;
      }
      .rtl .text-md-left,
      [dir="rtl"] .text-md-left {
        text-align: right !important;
      }
    
    }

Поскольку я хочу изменить конкретный для этого div, я назначаю ему идентификатор "maintitle" и после внесение изменений в указанный выше медиа-запрос 

@media (min-width: 768px) {
  .rtl .text-md-right,
  [dir="rtl"] .text-md-right {
    text-align: left !important;
  }
  .rtl .text-md-left,
  [dir="rtl"] .text-md-left {
    text-align: right !important;
  }

    #maintitle .col {
        width: 50% !important;
    }
}

Но он не работает Надеюсь на ваши предложения

Я впервые работаю с медиа-запросом

спасибо

...