1 Тема від cheappi386

  • cheappi386
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 19.08.2015
  • Повідомлень: 1 142
    • Репутація: 381

Тема: 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 Відповідь від karmeljuk

  • karmeljuk
  • karmeljuk
  • Replace Team
  • Поза форумом
  • Дата реєстрації: 28.01.2014
  • Повідомлень: 1 497
    • Репутація: 816

Re: Bootstrap та progressbar на CSS

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

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

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

karmeljuk вебсайт

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

  • cheappi386
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 19.08.2015
  • Повідомлень: 1 142
    • Репутація: 381

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 Відповідь від karmeljuk

  • karmeljuk
  • karmeljuk
  • Replace Team
  • Поза форумом
  • Дата реєстрації: 28.01.2014
  • Повідомлень: 1 497
    • Репутація: 816

Re: Bootstrap та progressbar на CSS

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

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

karmeljuk вебсайт

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

  • cheappi386
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 19.08.2015
  • Повідомлень: 1 142
    • Репутація: 381

Re: Bootstrap та progressbar на CSS

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

6 Відповідь від karmeljuk

  • karmeljuk
  • karmeljuk
  • Replace Team
  • Поза форумом
  • Дата реєстрації: 28.01.2014
  • Повідомлень: 1 497
    • Репутація: 816

Re: Bootstrap та progressbar на CSS

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

karmeljuk вебсайт