覆盖Bootstrap 3 CSS样式

Question

I have this style:

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

And I use it in my div element like this:

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

If I don't use form-style my div is appear at the center. But I want to use form-style and when I use it, the margin property of the form-style will prevent the bootstrap col-md-offset-3 to make my div center. How can I override the parent margin so that it haven't been set for my div?

If I remove the margin from form-style it works fine. But I can't remove the margin since it is used in other parts of my project.

Answer 1

Not sure why you want something like this as it seems a hack but your issue is that your element is floating that's why the margin auto is not working, so you need to remove the floating to make it working. (but it's not a good idea as it will make bootstrap behave strange)

 .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

From your question is seems that you don't want to replace the offset value of left to right, but want the margin set to the top and bottom. If this is the case this will work without any override of Bootstrap values. Also, adding the div id will not affect any other places that form-style is used.

 #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>