재정 부트 스트랩 3 CSS 스타일

Question

나는이 스타일이 있습니다

.form-style{ 
    margin: 50px auto;/* also tried margin: 50px auto !important; */ 
    /* other styles */ 
} 

을 그리고 나는이처럼 내 div 요소에서 사용 :

<div class="row"> 
<div id="myDiv" class="form-style col-md-6 col-md-offset-3"> 
<p>This is a text.</p> 
</div> 
</div> 

내 사업부가 나타날 것입니다 form-style를 사용하지 않는 경우 센터. 하지만 form-style을 사용하고 싶습니다. form-style의 여백 속성을 사용하면 부트 스트랩 col-md-offset-3이 내 div 센터를 만들지 않습니다. 상위 마진을 재정의하여 내 div에 설정하지 않았습니까?

form-style에서 margin을 제거하면 정상적으로 작동합니다. 하지만 내 프로젝트의 다른 부분에서 사용되기 때문에 여백을 제거 할 수 없습니다.

Answer 1

확실하지 가를 해킹 보인다 같은 것을 원하지만 문제는 요소가 당신 때문에, 여백 자동 작동하지 왜 부동입니다 이유 플로팅을 제거해야 작동합니다. 는

.form-style { 
 
    margin: 50px auto!important; 
 
    float: none!important; 
 
    /* other styles */ 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<div class=container> 
 
    <div class="row"> 
 
    <div id="myDiv" class="form-style col-xs-6 col-xs-offset-3"> 
 
     <p>This is a text.</p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

왼쪽에서 오른쪽으로 오프셋 값을 바꾸지 않고 상단과 하단을 margin으로 설정하는 것이 좋습니다. 이 경우 부트 스트랩 값을 무시하지 않아도 작동합니다. 또한 divid을 추가해도 form-style이 사용 된 다른 장소에는 영향을주지 않습니다.

#myDiv.form-style { 
 
    margin-top: 50px; 
 
    margin-bottom: 50px; 
 
    border: 1px solid; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="row"> 
 
    <div id="myDiv" class="form-style col-md-6 offset-md-3"> 
 
    <p>This is a text.</p> 
 
    </div> 
 
</div>