Question

＆GT; bootstrap css总是覆盖我的CSS

那个local.xml

   <reference name="head">
       <action method="addItem"><type>skin_css</type><name>css/bootstrap.min.css</name></action>
       <action method="addItem"><type>skin_css</type><name>css/negi.css</name></action>

包含bootstrap后，我的margin-padding会自动覆盖

Answer 1

不要回答你的问题，但这里有一个覆盖一些bootstrap属性的例子。

div.container > div.row > div[class*="col-"]{
  background-color: #EEE;  
  border-radius: 4px;
}
div[class*="custom-col"] {
  width: 100px;
  height: 50px;
  margin: 2px; 
  padding: 2px;  
}
.well.custom {
    min-height: 10px;
    padding: 5px;
    margin: 5px;
    background-color: #f5f500;
    border: 1px dotted #e3e3e3;
    border-radius: 8px;
    -webkit-box-shadow: inset 0 2px 2px rgba(0,0,0,.5);
    box-shadow: inset 0 2px 2px rgba(0,0,0,.5);  
 }

<!DOCTYPE html>
<html>
 <head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>   
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
 </head>
 <body>
  <div class="container">
   <div class="row well">
    <div class="col-xs-4 col-sm-4 col-lg-4">Column One</div>
    <div class="col-xs-4 col-sm-4 col-lg-4">Column Two</div>
    <div class="col-xs-4 col-sm-4 col-lg-4">Column Three</div>
   </div>    
   <div class="row well custom">
    <div class="col-xs-4 col-sm-4 col-lg-4 custom-col-1">Column One</div>
    <div class="col-xs-4 col-sm-4 col-lg-4 custom-col-2">Column Two</div>
    <div class="col-xs-4 col-sm-4 col-lg-4 custom-col-3">Column Three</div>
   </div> 
  </div>
 </body>
</html>

Answer 2

您的问题可能是由许多问题造成的，首先请检查您的浏览器检查程序以确切了解哪些BootStrap规则覆盖了您的，是否使用!important关键字？它比你的css规则有更大的specificity吗？您可能只需要编写具有更高特异性的css规则或!important关键字。

接下来检查页面上加载的css文件的顺序是什么？检查浏览器中的查看源（ctrl U）以确定您的布局xml可能存在冲突，即另一个影响订单的布局文件，请尝试此操作来解决此原因：

<reference name="head"> 
  <action method="removeItem"><type>skin_css</type><name>css/bootstrap.min.css</name></action>
 <action method="addItem"><type>skin_css</type><name>css/bootstrap.min.css</name></action>
  <action method="addItem"><type>skin_css</type><name>css/negi.css</name></action>

Answer 3

你应该在你的风格之前调用bootstrap。把它放在layout.xml。

中

我的Css被mangeo中的Bootstrap覆盖

3 个答案: