Bootstrap контрольные точки не работают в React Bootstrap - PullRequest
Новая
       2

Bootstrap контрольные точки не работают в React Bootstrap

1 голос
/ 19 января 2020

Я работаю с реагировать Bootstrap. Я разработал макет, который я хочу изменить на небольших экранах. Все, что я хочу сделать, это в определенных точках останова изменить размеры элементов h3 и изображения. Я использовал следующее:

Код из индекса. css: 

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { 
    .thumbnailImg{
    width: 30%;
    }

    h3{
        font-size: 1rem;
    }
 }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { 
    .thumbnailImg{
    width: 35%;
    }

    h3{
        font-size: 1rem;
    }

     }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) {
    .thumbnailImg{
    width: 40%;
    }

    h3{
        font-size: 1.5rem;
    }

}

Теперь по некоторым причинам ни одна из точек останова не работает. h3 остается 1,75 бэра на протяжении всего времени. Не только элемент h3, но и изображение не изменяет размеры, как определено. Может кто-нибудь может сказать мне, что я тут делаю не так.

Вот мой компонент, который использовал этот стиль : 

import React from 'react';
import { Image } from 'react-bootstrap';
import './index.css';

export const MyIcons = ({source,name}) => (
        <div className="col-sm-4 addMargin50 text-center">
            <Image className="thumbnailImg" src={ process.env.PUBLIC_URL + source } alt={name} roundedCircle />
            <h3 className="font-nunito text-uppercase"> {name} </h3>
        </div>
    )

Я также попытался создать отдельный класс для определения размеров шрифта в разных точках останова и добавил этот класс для моего изображения и элемента h3, однако ни один из них не работает.

1 Ответ

1 голос
/ 19 января 2020

Проблемы не с реакцией, это порядок ваших медиа-запросов. Если у вас есть перекрывающиеся правила, он всегда выберет последнее правило, которое было удалено. Если вы измените порядок своих медиа-запросов, вы получите то, что хотите.

Я отредактировал этот ответ для большей ясности.

Вам следует заказывать медиазапросы с самого большого устройства на самое маленькое устройство. 

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .thumbnailImg{
    width: 40%;
    }

    h3{
        font-size: 1.5rem;
    }

}

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 767.98px) { 
    .thumbnailImg{
    width: 35%;
    }

    h3{
        font-size: 1rem;
    }

     }



/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) { 
    .thumbnailImg{
    width: 30%;
    }

    h3{
        font-size: 1rem;
    }
 }

https://jsfiddle.net/txL5chk0/2/

Кроме того, я уверен, что мне не нужно сообщать вам, что комментарии, которые есть в вашем файле css, не являются действительные комментарии в CSS и не должны быть включены в ваш код ....

...