부트 스트랩의 기본값을 대체 할 수있는 옵션

부트 스트랩의 form-control 클래스가 더 이상 화면 너비가 768px보다 작아지는 display: inline-block을 유지하지 않음을 알게되었습니다. 이 설정을 덮어 쓰려면 설정해야했습니다부트 스트랩의 기본값을 대체 할 수있는 옵션

.form-control { 
    display: inline-block !important; 
}

CSS 규칙은이 규칙이 유일한 것입니까? !important을 사용해야합니까? !important을 제외하고는 위와 동일한 CSS로 display-inline-block과 같은 다른 클래스를 제공하려고 시도했지만 작동하지 않았습니다. 부트 스트랩을 !important으로 오버라이드하는 것이 이상하게 느껴졌습니다. 사용을 피하려고 노력했기 때문입니다. 그러나이 문제를 해결하는 다른 방법이 있습니까?

출처

2016-10-16 stackjlei

당신이 display: block; 선언, 부트 스트랩 후 .form-control { display: inline-block; }을 넣어 충분해야 재정의하기 위해, 루트에 .form-control CSS 클래스에도 적용되므로되어 here를 볼 수있는 바와 같이 inlude :

<html> 
 
     <head> 
 
     
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
     
 
     <style> 
 
      .form-control { 
 
      display: inline-block; 
 
      } 
 
     </style> 
 
     
 
     </head> 
 
     <body> 
 

 
     <!-- INSPECT THIS ELEMENT --> 
 
     <input class="form-control" /> 
 

 
     </body> 
 
    </html>

출처

2016-10-16 08:12:18 Hitmands

이 스크립트는 webcat을 통해 내 bundle.js에 번들로 제공되는 master.css에 넣을 때 작동하지 않습니다.이 스크립트는 부트 스트랩에 연결 한 후 실행되는 스크립트입니다. 그게 왜? – stackjlei

머리 태그 안에 CSS를 넣은 상태로 보여 주었을 때 실제로이 작업을 수행하지 못했습니다. – stackjlei

webpack을 통해 모듈을 번들하는 순서를 제어해야하고, 'inspector'를 확인하십시오. 내 솔루션 ** css는 'CASCADE 스타일 시트'의 약자이므로 ** 반드시 작동해야합니다. – Hitmands

부트 스트랩의 기본값을 대체 할 수있는 옵션

답변

관련 문제