オーバーライドブートストラップ3 CSSスタイル

Question

私はこのスタイルがあります。

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

をそして、私はこのように私のdiv要素にそれを使用する：私は私のdivはで表示されているform-style使用しない場合は

<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のmarginプロパティは、ブートストラップ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>