Переключатель с заголовком и меткой субтитров - PullRequest
Новая
       4

Переключатель с заголовком и меткой субтитров

0 голосов
/ 28 июня 2018

У меня есть 3 переключателя, которые выглядят как кнопки.

Здесь код: 

<div id='vaccine-selector-container' class="switch-field">
        <span class='custom-control custom-radio custom-control-inline'>
            <input type='radio' id='rb-dtp' name='vaccine-selector' class='custom-control-input' value='DTP' autocomplete='off' checked>
            <label class='custom-control-label' for='rb-dtp'>DTP</label>
            <label class='custom-control-label-help' for='rb-dtp'>Vaccine against diphtheria, tetanus, pertussis</label>
        </span>
        <span class='custom-control custom-radio custom-control-inline'>
            <input type='radio' id='rb-mmr' name='vaccine-selector' class='custom-control-input' value='MMR' autocomplete='off'>
            <label class='custom-control-label' for='rb-mmr'>MMR</label>
            <label class='custom-control-label-help' for='rb-mmr'>Vaccine against measles, mumps and rubella</label>
        </span>     
        <span class='custom-control custom-radio custom-control-inline'>
            <input type='radio' id='rb-pol' name='vaccine-selector' class='custom-control-input' value='POL' autocomplete='off'>
            <label class='custom-control-label' for='rb-pol'>POL</label>
            <label class='custom-control-labelHelp' for='rb-pol'>Vaccine against poliomyelitis</label>
        </span>
    </div>

Но я хочу вот что: ярлык «заголовок» и ярлык «субтитр».

enter image description here

Как я могу это сделать?

Ответы [ 4 ]

0 голосов
/ 28 июня 2018

Вам нужно обернуть обе метки под одну метку и дать атрибут 'for' для этой родительской метки, и вы можете изменить эти отдельные внутренние метки на любой другой тег (например, для тега p). 

<div id='vaccine-selector-container' class="switch-field">
        <span class='custom-control custom-radio custom-control-inline'>
            <input type='radio' id='rb-dtp' name='vaccine-selector' class='custom-control-input' value='DTP' autocomplete='off' checked>
            <label for='rb-dtp'>
                <p class='custom-control-label'>DTP</p>
                <p class='custom-control-label-help'>Vaccine against diphtheria, tetanus, pertussis</p>
            </label>

        </span>
        <span class='custom-control custom-radio custom-control-inline'>
            <input type='radio' id='rb-mmr' name='vaccine-selector' class='custom-control-input' value='MMR' autocomplete='off'>
            <label for='rb-mmr'>
                <p class='custom-control-label'>MMR</p>
                <p class='custom-control-label-help'>Vaccine against measles, mumps and rubella</p>
            </label>

        </span>     
        <span class='custom-control custom-radio custom-control-inline'>
            <input type='radio' id='rb-pol' name='vaccine-selector' class='custom-control-input' value='POL' autocomplete='off'>
            <label for='rb-pol'>
                <p class='custom-control-label'>POL</p>
                <p class='custom-control-labelHelp' for='rb-pol'>Vaccine against poliomyelitis</p>
            </label>
        </span>
    </div>
0 голосов
/ 28 июня 2018

Дети в один конец ( демо ): 

    <div id='vaccine-selector-container' class="switch-field">
        <span class='custom-control custom-radio custom-control-inline'>
            <input type='radio' id='rb-dtp' name='vaccine-selector' class='custom-control-input' value='DTP' autocomplete='off' checked>
            <label class='custom-control-label' for='rb-dtp'>
              <div>DTP</div>
              <label class='custom-control-label-help' for='rb-dtp'>Vaccine against diphtheria, tetanus, pertussis</label>
            </label>

        </span>
        <span class='custom-control custom-radio custom-control-inline'>
            <input type='radio' id='rb-mmr' name='vaccine-selector' class='custom-control-input' value='MMR' autocomplete='off'>
            <label class='custom-control-label' for='rb-mmr'>
              <div>MMR</div>
              <label class='custom-control-label-help' for='rb-mmr'>Vaccine against measles, mumps and rubella</label>
            </label>

        </span>     
        <span class='custom-control custom-radio custom-control-inline'>
            <input type='radio' id='rb-pol' name='vaccine-selector' class='custom-control-input' value='POL' autocomplete='off'>
            <label class='custom-control-label' for='rb-pol'>
              <div>POL</div>
                <label class='custom-control-labelHelp' for='rb-pol'>Vaccine against poliomyelitis</label>
            </label>

        </span>
    </div>
0 голосов
/ 28 июня 2018

поставить переключатели внутри ярлыков 

   <span class='custom-control custom-radio custom-control-inline'>
                    <label class='custom-control-label' for='rb-dtp'><input type='radio' id='rb-dtp' name='vaccine-selector' class='custom-control-input' value='DTP' autocomplete='off' checked>   DTP                 <label class='custom-control-label-help' for='rb-dtp'>              Vaccine against diphtheria, tetanus, pertussis</label>
</label>


            </span>

и 

.switch-field label {
width:40%;
}
0 голосов
/ 28 июня 2018

Не уверен, что это то, что вы пытаетесь достичь, я надеюсь, что это может быть полезно 

<div class="radio">
  <label><input type="radio" name="optradio">
    <h3>Title</h3>
    <p>Sub Title</p>
  </label>
</div>
...