1

Тема: Bootstrap та progressbar на CSS

Хочу вертикальний 3D прогрес бар.Знайшов приклад https://codepen.io/seheekim/pen/BKYGZp Але якщо класс water загорнут у бутстрап розмітку, то його масштабування перестає працювати.

<div class="container-fluid">
    <div class="row">
        <input type="radio" name="water" class="water--0" id="r0">
        <label for="r0">empty</label>
        <input type="radio" name="water" class="water--30" id="r1">
        <label for="r1">30%</label>
        <input type="radio" name="water" class="water--50" id="r2">
        <label for="r2">50%</label>
        <input type="radio" name="water" class="water--90" id="r3">
        <label for="r3">90%</label>
    </div>
    <div class="row">
        <div class="cylinder">
            <div class="water"></div>
        </div>
    </div>
</div>

можна це все між собою подружити ? чи для такий підхід у малюванні прогрес бару не сумісний з бутстрапом ?

2

Re: Bootstrap та progressbar на CSS

Не буде працювати, так як код

.water--0:checked ~ .cylinder .water {
    bottom: -50px;
}

означає, що елемент .cylinder повинен йти відразу після .water--0 та інших інпутів

3 Востаннє редагувалося cheappi386 (29.07.2020 09:15:36)

Re: Bootstrap та progressbar на CSS

Що після .water--0, що в самому кінці файлу стилів, не працює(( Якщо винести з бустрап контейнерів, то наче працює, але таке враження що water по висоті зміщено відносноcylinder на один row

<!--<div class="container-fluid">
    <div class="row">
        <input type="radio" name="water" class="water--0" id="r0">
        <label for="r0">empty</label>
        <input type="radio" name="water" class="water--30" id="r1">
        <label for="r1">30%</label>
        <input type="radio" name="water" class="water--50" id="r2">
        <label for="r2">50%</label>
        <input type="radio" name="water" class="water--90" id="r3">
        <label for="r3">90%</label>
    </div>
    <div class="row">
        <div class="cylinder">
            <div class="water"></div>
        </div>
    </div>
</div>
    -->
<input type="radio" name="water" class="water--0" id="r0">
<label for="r0">empty</label>
<input type="radio" name="water" class="water--30" id="r1">
<label for="r1">30%</label>
<input type="radio" name="water" class="water--50" id="r2">
<label for="r2">50%</label>
<input type="radio" name="water" class="water--90" id="r3">
<label for="r3">90%</label>
<div class="cylinder">
    <div class="water"></div>
</div>

4

Re: Bootstrap та progressbar на CSS

cheappi386 - ось варіант з бустрпапом, але елемент .cylinder має йти відразу після інпутів 

https://codepen.io/karmeljuk/pen/ExPzqJG

5 Востаннє редагувалося cheappi386 (29.07.2020 15:32:42)

Re: Bootstrap та progressbar на CSS

Дякую.А з чому у різних row не працює та що буде у випадку з column ?
PS: тобто якщо я захожу зробити з цих div якийсь грід, то це можна буде засобами бутстрапу ?

6

Re: Bootstrap та progressbar на CSS

cheappi386 - тому що .cylinder повинен бути сестринським елементом до інпутів, інакше селектор не спрацює