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设置？

如果我从margin移除form-style，则可以正常使用。但我无法删除保证金，因为它用于我项目的其他部分。

Answer 1

不确定为什么你想要这样的东西，因为它似乎是 hack 但你的问题是你的元素是浮动这就是为什么自动保证金不起作用，所以你需要删除浮动才能使其正常工作。 （但这不是一个好主意，因为它会使引导程序表现得很奇怪）

.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设置为顶部和底部。如果是这种情况，则无需重写Bootstrap值即可使用。此外，添加div id不会影响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>

覆盖Bootstrap 3 CSS样式

2 个答案: