Выравнивание переключателей Bootstrap с текстом

Question

Я пытаюсь настроить переключатели, но у меня возникают трудности с этим. Что я пытаюсь сделать, так это выровнять кнопки с отступом, потому что я собираюсь отображать курсор, если этот параметр был выбран. Я также хочу, чтобы текст немного всплывал, потому что он не соответствует фактическому переключателю.

input[type=radio] {
  z-index: 3;
  width: 26px;
  height: 26px;
  -moz-appearance: none;
}
label {
  font-weight: normal;
  font-size: 1.5em;
  cursor: pointer;
}
.question-label {
  margin-left: 15px;
}

<div class="radio">
  <label>
    <span class="button"><input type="radio" name="optionsRadios" value="20"></span>
    <span class="question-label">True</span>
  </label>
</div>

<div class="radio">
  <label>
    <span><i class="fa fa-caret-right fa-2x correct-answer" aria-hidden="true"></i></span>
    <span class="button"><input type="radio" name="optionsRadios" value="20"></span>
    <span class="question-label">False</span>
  </label>
</div>

Вот как это выглядит сейчас.

enter image description here

html css twitter-bootstrap font-awesome vertical-alignment

1

user3183411 7 Сен 2016 в 19:55

Answer 1

Итак, я сделал несколько вещей с вашим кодом:

Выровняйте элементы внутри label с помощью inline-block s:
```
.radio label > span {
    display: inline-block;
    vertical-align: middle;
}
```
Это лучше, чем позиционирование с помощью px.
Теперь добавьте значок каретки к обоим radio, чтобы горизонтальное выравнивание выполнялось автоматически (и вы могли контекстно отображать зеленую вставку). Чтобы заставить эту работу, примените эти:
```
.correct-answer {
  color: green;
}
.wrong-answer {
  opacity: 0;
}
```

Дайте мне знать ваши отзывы. Спасибо!

input[type=radio] {
  z-index: 3;
  width: 26px;
  height: 26px;
  -moz-appearance: none;
}
label {
  font-weight: normal;
  font-size: 1.5em;
  cursor: pointer;
}
.question-label {
  margin-left: 15px;
}
.radio label > span {
  display: inline-block;
  vertical-align: middle;
}
.correct-answer {
  color: green;
}
.wrong-answer {
  opacity: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<div class="radio">
  <label>
    <span><i class="fa fa-caret-right fa-2x wrong-answer" aria-hidden="true"></i></span>
    <span class="button"><input type="radio" name="optionsRadios" value="20"></span>
    <span class="question-label">True</span>
  </label>
</div>

<div class="radio">
  <label>
    <span><i class="fa fa-caret-right fa-2x correct-answer" aria-hidden="true"></i></span>
    <span class="button"><input type="radio" name="optionsRadios" value="20"></span>
    <span class="question-label">False</span>
  </label>
</div>

1

kukkuz 7 Сен 2016 в 17:25

Answer 2

Попробуйте добавить .radio span.button{ position:relative; top: 4px;} и input[type=radio] {margin:0;} в ваш CSS

input[type=radio] {
  z-index: 3;
  width: 26px;
  height: 26px;
  margin:0;
  -moz-appearance: none;
}
label {
  font-weight: normal;
  font-size: 1.5em;
  cursor: pointer;
}
.question-label {
  margin-left: 15px;
}
.radio span.button{ position:relative; top: 4px;}

<div class="radio">
  <label>
    <span class="button"><input type="radio" name="optionsRadios" value="20"></span>
    <span class="question-label">True</span>
  </label>
</div>

<div class="radio">
  <label>
    <span><i class="fa fa-caret-right fa-2x correct-answer" aria-hidden="true"></i></span>
    <span class="button"><input type="radio" name="optionsRadios" value="20"></span>
    <span class="question-label">False</span>
  </label>
</div>

1

link2pk 7 Сен 2016 в 17:09

Answer 3

input[type=radio] {
  z-index: 3;
  width: 26px;
  height: 26px;
  -moz-appearance: none;
}
label {
  font-weight: normal;
  font-size: 1.5em;
  cursor: pointer;
}
.question-label {
  margin-left: 5px;
  position:absolute;
  margin-top:3px;
}

<div class="radio">
  <label>
    <span class="button"><input type="radio" name="optionsRadios" value="20"></span>
    <span class="question-label">True</span>
  </label>
</div>

<div class="radio">
  <label>
    <span><i class="fa fa-caret-right fa-2x correct-answer" aria-hidden="true"></i></span>
    <span class="button"><input type="radio" name="optionsRadios" value="20"></span>
    <span class="question-label">False</span>
  </label>
</div>

0

Jones Joseph 7 Сен 2016 в 17:02

Answer 4

Я сделал некоторые изменения в вашем dom, так как вы хотите, чтобы курсор был перед переключателем. вы можете установить видимость этого курсора, когда вы не хотите, чтобы он был видимым, поскольку изменение видимости по-прежнему будет занимать место на экране по сравнению с display: none, что не повлияет на отступ радио

<div class="radio">
   <span><i class="fa fa-caret-right fa-2x correct-answer" aria-hidden="true"></i></span>
   <label>
   <span class="button"><input type="radio" name="optionsRadios" value="20"></span>
   <span class="question-label">True</span>
   </label>
</div>
<div class="radio">
   <span><i class="fa fa-caret-right fa-2x correct-answer" aria-hidden="true"></i></span>
   <label>
   <span class="button"><input type="radio" name="optionsRadios" value="20"></span>
   <span class="question-label">False</span>
   </label>
</div>

скрипка

0

PalakM 7 Сен 2016 в 17:23

Выравнивание переключателей Bootstrap с текстом

4 ответа

Похожие вопросы

Новые вопросы

html