2016-04-20 15 views
0

Ich habe eine Ansicht mit einer Tabelle, und ich versuche, jeden Text in der td als eine bestimmte Farbe festzulegen. Ich benutze Bootstrap, aber ich sehe nicht die Änderungen, die ich in meiner Site.css in der Ansicht widerspiegeln.Warum ändert sich die td-Textfarbe nicht?

Ansicht (html)

<div class="row"> 
<div class="col-lg-12"> 
    @using (Html.BeginForm("Index", "Home", FormMethod.Post, new {id = "frmNumber", @class = "form-group"})) 
    { 
     <button class="btn btn-lg btn-success" id="btnGetNumbers" title="Get Numbers"></button> 
     <div class="row"> 
      <div class="col-lg-12"> 
       <table class="table table-striped"> 
        <thead> 
        <tr> 
         <th>1st Number</th> 
         <th>2nd Number</th> 
         <th>3rd Number</th> 
         <th>4th Numer</th> 
         <th>5th Number</th> 
        </tr> 
        </thead> 
        <tbody> 
        <tr> 
         @if (null != Model) 
         { 
          <td class="firstNumber">@Model.Numbers[0]</td> 
          <td class="secondNumber">@Model.Numbers[1]</td> 
          <td class="thirdNumber">@Model.Numbers[2]</td> 
          <td class="fourthNumber">@Model.Numbers[3]</td> 
          <td class="fifthNumber">@Model.Numbers[4]</td> 
         } 
        </tr> 
        </tbody> 
       </table> 
      </div> 
     </div> 
    } 
</div>  
</div> 

CSS

body { 
    padding-top: 50px; 
    padding-bottom: 20px; 
} 

/* Set padding to keep content from hitting the edges */ 
.body-content { 
    padding-left: 15px; 
    padding-right: 15px; 
} 

/* Set width on the form input elements since they're 100% wide by default */ 
input, 
select, 
textarea { 
    max-width: 280px; 
} 

.firstNumber { 
    color: red; 
} 

.secondNumber { 
    color: blue; 
} 

.thirdNumber { 
    color: green; 
} 

.fourthNumber { 
    color: orange; 
} 

.fifthNumber { 
    color: purple; 
} 
+0

i Ihre hTML und CSS überprüft werden .. es funktioniert und ich kann durch Bootstrap .. –

+0

@severinolorillajr über geschüttelten sehen haben die td Farben ... es kann gewesen Vielen Dank für Ihre Antwort, ja, das war meine Vermutung, aber meine Frage ist, wie Sie es zur Arbeit bringen können –

+0

Ich empfehle das nicht, aber die einfache Lösung wäre '' wichtig' hinzuzufügen. So etwas wie diese Farbe: rot, wichtig, versuche auch, deinen Cache zu löschen. –

Antwort

2

ich sicher von hier nicht sagen, aber ich denke, dass Sie die Tatsache, dass Sie übersehen haben Laden Sie Ihr CSS nach Bootstrap CSS.

1

Von dem, was ich überprüft habe, funktioniert Ihr Code auf JSFiddle. Vielleicht, um besser zu diagnostizieren, was das CSS überschreibt, wäre es, die Regeln mit dem Web Inspector zu überprüfen. Von dort aus können Sie die CSS-Stylesheets entsprechend anpassen/neu anordnen.

0

Logischerweise sollten Sie Ihre benutzerdefinierte CSS nach Ihrem Bootstrap CSS, so dass die benutzerdefinierte überschreibt jede Bootstrap-Styling (mindestens so ist es normalerweise für mich funktioniert) oder Sie könnten es auf die chaotische Weise (! Wichtig, nicht.)

So würde es

<link rel="stylesheet" type="text/css" href="bootstrap.min.css"> 
<link rel="stylesheet" type="text/css" href="custom.css"> 
+0

Komm schon! NIEMALS benutzen! Wichtig! –

+0

"Ich rate nicht, es so zu tun" – MEGALELZ

+0

Ich weiß, tut mir leid. Ich habe es entfernt. –

Verwandte Themen