После вопроса здесь Я пытаюсь переместить галочку селектора влево от текста опции.
Вот пример на сайте: введите описание изображения здесь

Я пытался переписать CSS так:

.bootstrap-select.btn-group.show-tick .dropdown-menu li.selected a span.check-mark {
    position: relative;
}

Изменить его на relative позицию, но безуспешно.

Заранее спасибо.

Обновить

На официальном сайте есть пример:

<select class="selectpicker show-tick">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

Обновление 2

Вот мой файл css bootstrap-selecter выглядит так:

.bootstrap-select.btn-group.show-tick .dropdown-menu li.selected a span.check-mark {
  position: relative;
  display: inline-block;
  right: 15px;
  /*margin-top: 5px;*/
  left:2px;
}
.bootstrap-select.btn-group.show-tick .dropdown-menu li a span.text {
  margin-right: 34px;
}
1
passion 10 Янв 2017 в 17:38

4 ответа

Лучший ответ

Обновите следующее в вашем CSS:

    .bootstrap-select.btn-group.show-tick .dropdown-menu li.selected a span.check-mark{
    position: absolute;
    display: inline-block;
    left: 5px; //changed from right:15
    margin-top: 5px;
}

Посмотрите на изображение ниже:

enter image description here

И тебе хорошо идти.

2
Aakash Thakur 10 Янв 2017 в 15:18

Добавьте свойство left к вашему CSS для галочки. Как это:

.bootstrap-select.btn-group.show-tick .dropdown-menu li.selected a span.check-mark {
  position: relative;
  left:2px;
}

Вот рабочий фрагмент (половина кода от вопроса, указанного OP)

.bootstrap-select.btn-group.show-tick .dropdown-menu li.selected a span.check-mark {
  position: relative;
  display: inline-block;
  right: 15px;
  /*margin-top: 5px;*/
  left:2px;
}
.bootstrap-select.btn-group.show-tick .dropdown-menu li a span.text {
  margin-right: 34px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.min.js"></script>


	<div class="col-md-8">
		<td class="col-md-4">
          
			<select id="##ID7##_1" name="##ID7##_1[]" class="selectpicker" multiple data-width="100%" title="##valorSelect##">
				<option data-tokens="No nada" value="0">##no##</option>
				<optgroup label="Meses de lactancia...">
					<option data-tokens="Menos 3 meses" value="1">Menos de 3 meses.</option>
					<option data-tokens="3 6 meses" value="2">De 3 a 6 meses.</option>
					<option data-tokens="6 12 meses" value="3">De 6 a 12 meses.</option>
					<option data-tokens="Mas Más 12 meses" value="4">M&aacute;s de 12 meses.</option>
				</optgroup>
			</select>
								
		</td>
	</div>
1
ab29007 10 Янв 2017 в 15:16

Вы пытались добавить класс .pull-left к галочке? Он автоматически имеет тег! Важный, который перезаписывает конфликтующие классы и добавляет плавающий элемент слева, который должен поместить его туда, где вы хотите

0
Saliel Irizarry 10 Янв 2017 в 14:41

Это работает для меня

.show-tick.bootstrap-select .dropdown-menu .selected span.check-mark{
    left: 15px;
}
0
Candice 10 Янв 2019 в 19:32