css bootstrap select 将显示刻度线移动到下拉菜单中文本的左侧

Question

在之后，我试图将选择器的刻度线移动到选项文本的左侧。
这是网站上的示例：

我试图像这样覆盖 css：

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

将其更改为relative位置，但没有成功。

提前致谢。

更新

official website上有一个例子：

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

更新a 2

这是我的 bootstrap-选择器 css 文件如下所示：

.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;
}

Answer 1

您是否尝试过将 .pull-left class 添加到复选标记中？它自动有一个 !important 标签，它会覆盖冲突的 classes 并在左侧添加一个浮点数，应该把它放在你想要的地方

Answer 2

将 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>

Answer 3

在您的 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;
}

看下图：

你很高兴。

Answer 4

这对我有用

.show-tick.bootstrap-select .dropdown-menu .selected span.check-mark{
    left: 15px;
}

css bootstrap select 将显示刻度线移动到下拉菜单中文本的左侧

css bootstrap select move show tick mark to the left of text in dropdown menu

javascript

html

css

twitter-bootstrap

bootstrap-select

更新

更新a 2