我希望我的代码中的一个 div 水平居中对齐，但还需要使用 Bootstrap col-md-12 类。所以我使用了以下内容。
<div id="canvas" class="col-md-12">
我将 css 声明为:
#page-body #canvas {
border: 2px solid black;
margin: 50px auto;
padding: 10px;
width: 60%;
}
但是，这被 Bootstrap 的 float 属性覆盖了:
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
float: left;
}
我不想使用 !important 或更改 Bootstrap 代码。
在寻找解决方案的时候，我发现
- 通过 id 调用是合适的，我没有运气就做过。
- 我试过了 this problem's solution使用给出 200:10 结果的特异性计算器，但仍然无法正常工作。
- 我的自定义 css 链接放在 Bootstrap 链接之后
是否有一种干净的方法来避免这种覆盖？
当未使用 col-md-12 类但我想使用 Bootstrap 类时，可以获得所需的输出。
更新: 基本上使用类 container 而不是 col-md-12 给出了所需的输出，但它有任何副作用吗？
JSFIDDLE
最佳答案
<body>
<div class="container">
<div class="col-md-6 col-md-offset-3 bg-danger">
<h1>Middle</h1>
</div>
</div>
</body>
这可以用作您的要求的答案。您可以使用 bootstrap 提供的 offset 样式，而不是使用自定义样式来使 div 水平居中。
bg-danger 类仅用于演示目的。
关于html - 如何避免 Bootstrap 覆盖名为 id 的自定义 css？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38971130/