html - 覆盖 Bootstrap 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 我的 div 会出现在中心。但是我想使用 form-style 并且当我使用它时， form-style 的 margin 属性将阻止 Bootstrap col-md-offset-3 使我的 div 居中。我怎样才能覆盖父边距，以便它没有为我的 div 设置？

如果我从 form-style 中删除 margin 它工作正常。但我无法删除边距，因为它用于我元素的其他部分。

Answer 1

不确定你为什么想要这样的东西，因为它看起来很hack，但你的问题是你的元素是 float 的，这就是边距自动不起作用的原因，所以你需要删除 float 以使其工作。 (但这不是一个好主意，因为它会使 Bootstrap 表现得很奇怪)

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