Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
320 views
in Technique[技术] by (71.8m points)

html - Cant override bootstrap

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>

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;
}
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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.

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

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...