Html 如何避免引导覆盖名为定制css的id？_Html_Css_Twitter Bootstrap

Html 如何避免引导覆盖名为定制css的id？

html css twitter-bootstrap

Html 如何避免引导覆盖名为定制css的id？,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我希望代码中的div水平居中对齐，但也需要使用bootstrapcol-md-12class。所以我用了下面的方法 <div id="canvas" class="col-md-12"> 但是，这将被引导浮动属性覆盖： .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

我希望代码中的div水平居中对齐，但也需要使用bootstrap

col-md-12

class。所以我用了下面的方法

<div id="canvas" class="col-md-12">

但是，这将被引导浮动属性覆盖：

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

我不想使用

！重要信息

或更改引导代码

当我在寻找解决方案时，我发现

用身份证打电话是合适的，我没有运气

我尝试使用特异性计算器，它给出200:10的结果，但仍然不起作用

我的自定义css链接放在引导链接之后

有没有干净的方法来避免这种超控

如果未使用

col-md-12

类，但我想使用引导类，则会得到所需的输出

更新：基本上使用class

container

而不是

col-md-12

发出了所需的输出，但是它有任何副作用吗？

将样式与e.x.网格元素混用总是一个坏主意。只需包装#canvas元素：

<div class="col-md-12">
    <div id="canvas"></div>
</div>

将样式与e.x网格元素混用总是一个坏主意。只需包装#canvas元素：

<div class="col-md-12">
    <div id="canvas"></div>
</div>

好的。好问题

要覆盖bootstrap提供的一些疯狂的填充和边距，您可以

*
{
  margin: 0px;
  padding: 0px;
}

要使用id或类，可以选择以下方式之一：

(一)


.col-md-12
{
//boostrap css将出现在这里
}
.col-md-12#画布
{
//col-md-12和画布在这里
}
#帆布
{
//所有特定于画布的内容都在此处，此处提到的任何边距或填充都将覆盖之前提到的所有边距！
}

(二)


//在这里输入代码
.帆布
{
//在此处执行样式设置，此处提及的所有样式将覆盖col-md-12中的样式
}

就我个人而言，我更喜欢第二个。我不喜欢使用id和类来设计样式，代码看起来很混乱。我使用类进行编码，使用id进行javascript（比如获取值）

好的。好问题

要覆盖bootstrap提供的一些疯狂的填充和边距，您可以

*
{
  margin: 0px;
  padding: 0px;
}

要使用id或类，可以选择以下方式之一：

(一)


.col-md-12
{
//boostrap css将出现在这里
}
.col-md-12#画布
{
//col-md-12和画布在这里
}
#帆布
{
//所有特定于画布的内容都在此处，此处提到的任何边距或填充都将覆盖之前提到的所有边距！
}

(二)


//在这里输入代码
.帆布
{
//在此处执行样式设置，此处提及的所有样式将覆盖col-md-12中的样式
}

就我个人而言，我更喜欢第二个。我不喜欢使用id和类来设计样式，代码看起来很混乱。我使用类进行编码，使用id进行javascript（比如获取值）


中间的

这可以作为您需求的答案。可以使用引导提供的偏移样式，而不是使用自定义样式使div水平居中
bg危险等级仅用于演示目的。
中间的
这可以作为您需求的答案。可以使用引导提供的偏移样式，而不是使用自定义样式使div水平居中

bg危险等级仅用于演示目的。
您确实尝试过给出float:none；到#页面主体#画布，对吗？是的，我做了，但不是我想要的-bdw在你试图给出的问题中添加了一个更新：无；到#页面主体#画布，对吗？是的，我做了，但不是我想要的-bdw在问题中添加了一个更新使用它导致中间元素（两个col-md-6）失控-我不知道它是如何发生的。使用它导致中间元素（两个col-md-6）疯狂-我不知道它是怎么发生的。它和@Aaroniker的asnwer一样，我已经尝试使用JSFIDLE来声明它。@SachDan无法加载您的JSFIDLE！bt我不知道如何添加引导到它，尽管使用引导链接
，或者你也可以在那里创建文件@SachDanIt与@Aaroniker的asnwer相同，我已尝试使用JSFIDLE来解除它的声明。@SachDan无法加载您的JSFIDLE！bt我不知道如何添加引导到它，尽管使用引导链接
，或者你也可以在那里创建文件@萨赫丹
<div class="col-md-12"> <div class="canvas"> //put in your code here </div> </div> .canvas { //perform your styling here, all styles mentioned here will override the styles in col-md-12 }

<body> <div class="container"> <div class="col-md-6 col-md-offset-3 bg-danger"> <h1>Middle</h1> </div> </div> </body>