Проблема выравнивания при изменении размера шрифта надписи с помощью переключателей в Bootstrap - PullRequest
Новая
       18

Проблема выравнивания при изменении размера шрифта надписи с помощью переключателей в Bootstrap

1 голос
/ 04 февраля 2020

Я работаю со стилем радиокнопок bootstrap и у меня проблема с выравниванием радиокнопок и их меток.

Основная проблема возникает при изменении размера шрифта метки: переключатель остается с тем же размером (очевидно, потому что я его не менял) в исходном месте, а метка меняет свой размер, перемещаясь немного ниже (в зависимости от размера шрифта; чем больше размер, тем длиннее движение).

Здесь вы можете увидеть проблему с выравниванием:

enter image description here

Я также оставлю здесь мой код: 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<form name="ejercicio_p1_form" method="POST" action="/response_p1_exercise">
  <div class="container">
    <div class="row">
      <div class="col-2"></div>
      <div class="col-3">
        <div class="radio" id="radio_p1_1">
          <div class="custom-control custom-radio">
            <input type="radio" class="custom-control-input" name="p1_ejer" id="p1_ejer_1" value="1" onclick="submit_form_p1_exercise()">
            <label style="font-size:30px" class="radio custom-control-label" for="p1_ejer_1"> Option 1</label>
            </input>
          </div>
        </div>
      </div>
      <div class="col-2">
        <div class="radio" align="center" id="radio_p1_2">
          <div class="custom-control custom-radio">
            <input type="radio" class="custom-control-input" name="p1_ejer" id="p1_ejer_2" value="2" onclick="submit_form_p1_exercise()">
            <label style="font-size:30px" class="radio custom-control-label" for="p1_ejer_2"> Option 2</label>
            </input>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>

1 Ответ

1 голос
/ 04 февраля 2020

bootstrap label имеет :before и :after с position: absolute и top: .25rem. Это делает радиоканал фиксированным. Мы можем вычислить его положение с помощью top: calc(foo).

. Мы знаем, что height радиокруга - это 1rem, height из label меняется, поэтому оно составляет 100%. Чтобы найти координату верхнего левого угла радиокруга, мы берем 50% от label height, половина окружности должна быть выше центра, наполовину ниже, поэтому вычтите 0.5rem.

И наша формула: top: calc((100% - 1rem)/2)

Посмотрите во фрагменте, как это выглядит. 

.label-style {
  white-space: nowrap;
}

.label-style:before, .label-style:after {
  top: calc((100% - 1rem)/2) !important;
}

.font-size30 {
  font-size: 30px;
}

.font-size50 {
  font-size: 50px;
}

.font-size62 {
  font-size: 62px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<form name="ejercicio_p1_form" method="POST" action="/response_p1_exercise">
  <div class="container p-4">
    <div class="row">
      <div class="col-6">
        <div class="radio" id="radio_p1_1">
          <div class="custom-control custom-radio">
            <input type="radio" class="custom-control-input" name="p1_ejer" id="p1_ejer_1" value="1" onclick="submit_form_p1_exercise()">
            <label class="radio custom-control-label label-style font-size30" for="p1_ejer_1"> Option 1</label>
            </input>
          </div>
        </div>
      </div>
      <div class="col-6">
        <div class="radio" align="center" id="radio_p1_2">
          <div class="custom-control custom-radio">
            <input type="radio" class="custom-control-input" name="p1_ejer" id="p1_ejer_2" value="2" onclick="submit_form_p1_exercise()">
            <label class="radio custom-control-label label-style font-size30" for="p1_ejer_2"> Option 2</label>
            </input>
          </div>
        </div>
      </div>
    </div>
    
    <div class="row">
      <div class="col-6">
        <div class="radio" id="radio_p1_1">
          <div class="custom-control custom-radio">
            <input type="radio" class="custom-control-input" name="p1_ejer" id="p1_ejer_3" value="1" onclick="submit_form_p1_exercise()">
            <label class="radio custom-control-label label-style font-size50" for="p1_ejer_3"> Option 1</label>
            </input>
          </div>
        </div>
      </div>
      <div class="col-6">
        <div class="radio" align="center" id="radio_p1_2">
          <div class="custom-control custom-radio">
            <input type="radio" class="custom-control-input" name="p1_ejer" id="p1_ejer_4" value="2" onclick="submit_form_p1_exercise()">
            <label class="radio custom-control-label label-style font-size50" for="p1_ejer_4"> Option 2</label>
            </input>
          </div>
        </div>
      </div>
    </div>
    
    <div class="row">
      <div class="col-6">
        <div class="radio" id="radio_p1_1">
          <div class="custom-control custom-radio">
            <input type="radio" class="custom-control-input" name="p1_ejer" id="p1_ejer_5" value="1" onclick="submit_form_p1_exercise()">
            <label class="radio custom-control-label label-style font-size62" for="p1_ejer_5"> Option 1</label>
            </input>
          </div>
        </div>
      </div>
      <div class="col-6">
        <div class="radio" align="center" id="radio_p1_2">
          <div class="custom-control custom-radio">
            <input type="radio" class="custom-control-input" name="p1_ejer" id="p1_ejer_6" value="2" onclick="submit_form_p1_exercise()">
            <label class="radio custom-control-label label-style font-size62" for="p1_ejer_6"> Option 2</label>
            </input>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>
...