不能覆盖引导程序 [英] Cant override bootstrap
问题描述
我正尝试使用bootstrap为我的网格赋予样式，但它使它覆盖了所有页面。我试图让包含表格的div更小，但它没有工作。如何重写引导样式？
I am trying to use bootstrap to give style to my grid but it makes it cover all the page. I tried to make the div containing the table smaller but it didnt work. How can I override bootstrap style?
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重写引导程序
my StyleSheet to override 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;
}
推荐答案
必须加载Bootstrap CSS正如其他人所述，在bootstrap.css之后的一个单独的CSS。考虑到这一点，如果引导程序引用了不想使用的样式CSS，则必须使用单独的CSS覆盖它。这是一个很好的例子。开箱即用的Bootstrap带有图例的Fieldsets都搞砸了。这是bootstrap的CSS。
Bootstrap CSS must be loaded in a separate CSS after bootstrap.css as others have stated. With that in mind if bootstrap references a style CSS you don't want to use you MUST override it with a separate CSS. Here is a good example. Right out of the box Bootstrap's Fieldsets with Legends are all screwed up. Here's bootstrap's CSS.
如何使用CSS修复BOOTSTRAP的字体和图例
HOW TO FIX BOOTSTRAP'S FIELDSETS AND LEGEND USING CSS
fieldset {
padding: .35em .625em .75em;
margin: 0 2px;
border: 1px solid #c0c0c0;
}
legend {
padding: 0;
border: 0;
}
但是这真的是我想要fieldset的风格，因此我必须重写它通过使用此：
But this is really what I want the fieldsets styled as so I had to override it by using this:
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;
}
这篇关于不能覆盖引导程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
