Question

我正在尝试使用bootstrap为我的网格赋予样式，但它使它覆盖了所有页面。我试图使包含表的div更小但它没有用。我怎样才能覆盖bootstrap样式？

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>

我的StyleSheet覆盖bootstrap

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

Answer 1

Bootstrap CSS必须在bootstrap.css之后加载到一个单独的CSS中，正如其他人所说的那样。考虑到这一点，如果bootstrap引用了一个你不想使用的样式CSS，那么必须用一个单独的CSS覆盖它。这是一个很好的例子。开箱即用的Bootstrap带有图例的Fieldsets都搞砸了。这是自助式CSS。

如何使用CSS修复BOOTSTRAP＆F FDSDSETS和LEGEND

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

Answer 2

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

.week-calendar{
  width: 400px;
}

您正在寻找代码中不存在的tr.active课程。

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

Bootply Demo

Answer 3

Bootstrap故意难以覆盖他们的CSS。

添加一个或多个类，然后使用他们的类来覆盖新的attr。

另外，400什么？像素？％？：）

无法覆盖引导程序

3 个答案:

Bootply Demo