无法覆盖引导程序答案

【问题标题】：Cant override bootstrap无法覆盖引导程序
【发布时间】：2014-08-16 02:33:30
【问题描述】：

我正在尝试使用引导程序为我的网格赋予样式，但它使它覆盖了所有页面。我试图使包含表格的 div 更小，但它没有用。如何覆盖引导样式？

HTML

<!doctype html>
<html ng-app='calendar'>
<head>
    <title>Calendar</title>
  <link rel="stylesheet" type="text/css" href="static/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="static/mystyle.css">
    <script type="text/javascript" src="static/angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>


</head>

<body >
    <div class='wrapper' ng-controller='GridCtrl as grid'>
     <div class="week-calendar">
     <table class="table table-striped table-bordered table-condensed" width="100">
      <tbody>
            <tr ng-repeat="row in grid.rows">
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
            </tr>
      </tbody>
     </table>
   </div>
    </div>
</body>
</html>

我的样式表覆盖引导程序

.week-calendar{
  width: 400;
}

.table-striped tbody tr.active:nth-child(odd) td, .table-striped tbody tr.active:nth-child(odd) th {
  background-color: black;
}

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

如其他人所述，Bootstrap CSS 必须在 bootstrap.css 之后加载到单独的 CSS 中。考虑到这一点，如果引导程序引用了您不想使用的样式 CSS，则必须使用单独的 CSS 覆盖它。这是一个很好的例子。开箱即用的 Bootstrap 的 Fieldsets with Legends 都搞砸了。这是引导程序的 CSS。

如何使用 CSS 修复 BOOTSTRAP 的字段集和图例

  fieldset {
  padding: .35em .625em .75em;
  margin: 0 2px;
  border: 1px solid #c0c0c0;
  }

  legend {
  padding: 0;
  border: 0;
  }

但这确实是我想要的字段集样式，所以我不得不使用它来覆盖它：

fieldset {  
        padding: 10px;
        margin: 0 auto;
        margin-bottom: 10px;
        border: 1px solid #bbb;
    }

    legend {
       font-weight:bold;
       padding:0px 6px 0px 6px;
       font-size: 15px;
       width: auto;
       border-bottom: none;
       margin-bottom: 0px;
    }

【讨论】：

【解决方案2】：

您的week-calendar 类需要有一个度量单位。

.week-calendar{
  width: 400px;
}

而您正在寻找代码中不存在的 tr.active 类。

如果您将<tr> 类更改为<tr class="active" ng-repeat="row in grid.rows">，它将为您提供所需的结果。但是请注意，这将使所有表格单元格都具有您的自定义 CSS 样式。

Bootply Demo

【讨论】：

【解决方案3】：

Bootstrap 故意使其难以覆盖其 CSS。

添加一个或额外的类，然后在需要时使用它们的类覆盖您的新属性。

另外，400 什么？像素？ %? :)

【讨论】：

Bootstrap 不会故意让它变得困难。只需创建自己的 CSS 文件并在加载 Bootstrap 样式表后包含它。 <link rel="stylesheet" href="css/custom_styles.css">
“让它变得困难”是指他们使用的名称，以及这些框架构建方式的级联性质。是的，在引导之后添加另一个样式表可以帮助覆盖特异性。
是的，为什么这些框架在其 CSS 中使用级联特性？莫名其妙！