覆盖引导标签

Question

我想弄清楚如何覆盖默认的引导程序代码。 我想要一个启用浮动标签的工作片段。 但是，该标签以 Jquery 和 css 为目标，但引导程序使用它的默认标签。 我什至尝试给标签一个 ID 或类，但它仍然不起作用。

 <div class="row p-5">
                    <div class="col-3">
                        <label class="label-test-new">Floating label</label>
                        <select id="select" class="js-select" multiple>
                            <option>Sed pulvinar erat efficitur turpis dapibus mattis.</option>
                            <option>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</option>
                            <option>Nam vitae ipsum rutrum, posuere lorem non, aliquet libero.</option>
                            <option>In faucibus lorem sed sem maximus ultricies.</option>
                            <option>Vestibulum pellentesque dui sed quam vulputate volutpat.</option>
                            <option>Nunc cursus massa non augue ultrices, in placerat massa ultrices.</option>
                        </select>
                    </div>
                </div>


.label-test-new {
    &.selected {
        top: -20px;
        font-size: 12px;
        transform: translateY(0);
    }
    font-size: 16px;
    color: #C2185B;
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 25px;
    transform: translateY(-50%);
    transition: all 0.2s ease 0s;
}

$('.js-select').select2().on('select2:open', (elm) => {
  const targetLabel = $(elm.target).prev('label');
  targetLabel.addClass('selected');
}).on('select2:close', (elm) => {
  const target = $(elm.target);
  const targetLabel = target.prev('label');
  const targetOptions = $(elm.target.selectedOptions);
  if (targetOptions.length === 0) {
    targetLabel.removeAttr('class');
  }
});

此外，您如何定位将其应用于此类标签：

@Html.LabelFor(model => model.Request.RTMFlag, new { @class = "header-label" })

Answer 1

使用!important覆盖

或使用属性style内联 css

或者在你的 css 中使用div > div > label

您可能需要在其他 2 个技术上设置 !important。