동적으로 생성 된 요소에서 CSS 재정의

bootstrap-select을 사용 중입니다. div을 select 위에 추가합니다.동적으로 생성 된 요소에서 CSS 재정의

<select id="@Html.IdForModel()" 
    name="@Html.NameForModel()" 
    class="selectpicker form-control" 
    data-live-search="true"></select> 
... 

var selectBox = $('#@Html.IdForModel()'); 
selectBox.selectpicker()

을하지만, 개발자 도구가있는 페이지에서 내가 볼 : 다른 측면에서, 내가 정의

<div class="btn-group bootstrap-select form-control"> 
    <button .../> 
    <div class="dropdown-menu open" .../> 
    <select .../> 
</div>

가 지금은 "display:block" 수 있도록이 외부 DIV 필요, 이것은 내가 경험 몇 가지 레이아웃 문제를 해결합니다. 그러나 btn-group 및 bootstrap-select은 모두 "display:block-inline"을 적용합니다.

나는 시도했다 :

내 정의
selectBox.parent().addClass("select-parent-div");에 !important 추가
별도의 CSS 파일에 bootstrap-select 내 자신의 스타일을 정의 내 CSS를 갖는 : .select-parent-div{display: block !important}

유일한 일은 selectBox.parent().css("display", "block");이지만 CSS 스타일에 내 스타일을 갖고 싶습니다. 왜 CSS를 적용하지 않으며 그것에 대해 무엇을 할 수 있습니까?

출처

2016-10-13 Archeg

부트 스트랩 i에 적용되는 스타일이! important로 표시되어 있는지 확인해야합니다.이 경우 CSS에서는 스타일을 고려하지 않을 것이며, 이전에이 문제에 직면했으며 작업이라는 속임수는 같은 스타일로 만듭니다 귀하의 페이지에있는 부트 스트랩의 이름과 원하는대로 속성을 변경하십시오. – mbadeveloper

@mbdeveloperives 그것은 아니지만'덜'입니다 - 저는 그것에 익숙하지 않습니다. 적용되는 규칙은 다음과 같습니다 :'.bootstrap-select.btn-group { & : not (.input-group-btn), & [class * = "col-"] { float : none; 디스플레이 : 인라인 블록; margin-left : 0; }' – Archeg

@mbadeveloper 와우! 더 적은 부분을 복사하고 실제로 수정했습니다!. 이 글을 답으로 올리면 받아 들일 것입니다. – Archeg

부트 스트랩을 적용하는 스타일이! important로 표시되어 있는지 확인해야합니다.이 경우 CSS는 스타일을 고려하지 않습니다.

나는이 문제에 직면했다. 그 트릭은 페이지의 부트 스트랩과 같은 스타일로 같은 스타일을 만들고 원하는대로 속성을 변경하는 것이다.

출처

2016-10-13 12:52:23 mbadeveloper

동적으로 생성 된 요소에서 CSS 재정의

답변

관련 문제