2017-12-31 18 views
0

私はこのスタイルがあります。オーバーライドブートストラップ3 CSSスタイル

.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を削除しても問題ありません。しかし、それは私のプロジェクトの他の部分で使用されているので、私は余白を削除することはできません。

答えて

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>

+0

ありがとうございます。できます。しかし、私はフロートについて理解していませんでした。もっと説明していただけますか? – JeanA

+0

@JeanA Bootstrap 3はフローティング要素を使用してレイアウトを作成しますが、浮動小数点要素とは異なる振る舞いにするプロパティfloat:leftを持っています。 https://css-tricks.com/all-about-floats/をご覧ください。フローティング要素がどのように動作するのか理解できます; –

+0

また、私が使用すると重要なマージンはすべての子供にとって役に立たないでしょうか?もしそうなら、どうしてマージンを取るべきですか? – JeanA

0

あなたの質問から、左から右のオフセット値を置き換えたくないようですが、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>

+0

はい(それはそれは、ブートストラップ作る奇妙な振る舞いますようお勧めできません)。しかし、運がない。以前と同じです。 – JeanA

+0

質問をスニペットで更新して、 'div'の内容を含めることができるので、これがどのように機能しているか見ることができますか? 'div'はマージンとして' auto'を受け入れる適切なスタイルを持っていないかもしれません。 – Darren

+0

私のdivには単純なpタグしかありません。 – JeanA