Почему в 100% 101%?

Question

[QNA-1976]

С эмуляцией телефона 320px - всё норм

Без эмуляции (320px, 480px) - косяк

<div class="progress">
    <div class="bg-success" style="width: 10%"></div>
    <div class="bg-danger" style="width: 90%"></div>
</div>

<div class="progress">
    <div class="bg-success" style="width: 11%"></div>
    <div class="bg-danger" style="width: 90%"></div>
</div>

Что за дичь справа на первом скрине: как убрать?

Comments

[Алексей Уколов]

Стили приложите к вопросу.

[QNA-1976]

Алексей Уколов, это bootstrap

[QNA-1976]

Алексей Уколов,
style="width: 10% style="width: 90%
вот стили ещё

[mahmudchon]

QNA-1976, тогда только если инструментом "Кисть" закрашивать. Нужно разбирать на конкретном вашем примере все же.

[QNA-1976]

mahmudchon, я изолентой синей прямо на экране тела заклеиваю тогда норм всё, на примере стандартная разметка Bootstrap 4, чтобы не видеть этого косяка, то белый фон тогда люди делают за баром? )))

[mahmudchon]

Поверьте мне на слово, пожалуйста, мы не просто так просим у Вас стили. Так как Ваша разметка != "стандартная Bootstrap"

[QNA-1976]

mahmudchon, как role, aria-valuenow и aria-valuemax влияет на стиль прогрессбара? )))

[mahmudchon]

QNA-1976, никак.

[QNA-1976]

mahmudchon, +

[zkrvndm]

Возможно это пробелы. Удалите переносы строк и пробелы внутри прогресс бара.

[QNA-1976]

Надим Закиров, в одну строку теги - без изменений, я если в эмуляцию телефона переключаю, то нет аппендикса этого, а если как с ПК, то появляется, на любом расширении.

[uRoot]

QNA-1976, проверьте на реальном устройстве. Не всегда эмуляция точно передаёт суть происходящего. И код или ссылку на пример приложите, а то угадывать можно долго.

[QNA-1976]

CryNet, я на ПК проверяю, 1% в реальном режиме ПК теряется при любом разрешении, эмуляция как раз корректно работает.

[uRoot]

QNA-1976,

я на ПК проверяю

А я пишу, чтобы вы проверили на телефоне, а не в эмуляторе

[QNA-1976]

CryNet, вот где косяк

<div class="container">
    <div class="bg-dark p-5">
        <div class="progress">
            <div class="bg-success" style="width: 10%"></div>
            <div class="bg-danger" style="width: 90%"></div>
        </div>
    </div>
</div>

<div class="bg-dark p-5">
        <div class="progress">
            <div class="bg-success" style="width: 10%"></div>
            <div class="bg-danger" style="width: 90%"></div>
        </div>
    </div>

прогрессбар внутри .container с ошибкой

ну так у меня вообще-то вид внутри .container подгружается - это же bootstrap

[Ankhena]

Покрасьте фон в цвет основного фона, а не в белый.

Другие варианты возможны после ссылки на песочницу.

[QNA-1976]

Ankhena, подойдёт, закиньте в ответ про фон - отмечу

[Ankhena]

QNA-1976, вы там сами неплохо справились ))

[QNA-1976]

Ankhena, сижу думаю какой я тупой у меня составные прогрессбары везде из двух частей, если можно правую сторону заменить подложкой ))) спс, что уделили внимание

p.s. и высчитываю правую сторону по формуле ой мляяяя ....

[Ankhena]

QNA-1976, это у всех бывает )))

Answer 1

[QNA-1976]

<div class="progress bg-danger">
    <div class="bg-success" style="width: 10%"></div>
</div>