如何覆蓋CSS來更改<th>引導程序

我希望某些表格標題對齊中心，而另一個左對齊。我嘗試用vaiours方法來覆蓋bootstrap中的方法。但我不能成功。這裏是我試過的東西：如何覆蓋CSS來更改<th>引導程序

我創建了一個名爲column-center的類。在HTML看起來像這樣：

<thead> 
    <tr> 
    <th>Roll#</th> 
    <th style="width: 20%">First Name</th> 
    <th style="width: 20%">Middle Name</th> 
    <th style="width: 20%">Last Name</th> 
    <th class="column-center" style="width: 10%">Class</th> 
    <th class="column-center" style="width: 10%">Division</th> 
    </tr> 
</thead>

我嘗試的CSS是：

.column-center > thead > tr > th{ 
text-align: center !important; 
} 
.column-center > thead > tr > th, .column-center > tbody > tr > th, .column-center > tfoot > tr > th, .column-center > thead > tr > td, .column-center > tbody > tr > td, .column-center > tfoot > tr > td{ 
text-align: center !important; 
} 
.column-center > tr > th{ 
text-align: center !important; 
} 
.column-center .table > thead > tr > th{ 
text-align: center !important; 
} 
table > thead > tr > th .column-center{ 
text-align: center !important; 
} 
table.table.table-striped tr.column-center td{ 
text-align: center !important; 
} 
.column-center > thead > tr > th, .column-center > tbody > tr > th, .column-center > tfoot > tr > th, .column-center > thead > tr > td, .column-center > tbody > tr > td, .column-center > tfoot > tr > td{ 
text-align: center; 
} 
.table-striped > tbody > tr:nth-child(odd) > th.column-center { 
text-align: center !important; 
} 
.table-striped > tbody > tr:nth-child(odd) > td.column-center { 
text-align: center; 
} 
.table tbody tr th{ 
text-align: center; 
}

來源

2016-08-10 Shehzi

你確定你包括你的自定義CSS後引導？看着他們的CSS一個簡單的'th {text-align：center}'應該做到這一點。 – Leeish

是的。我確定，因爲我已經使用相同的CSS來覆蓋另一種風格。如果我做{text-align：center}它會改變整個屬性。我想要2個標題居中。在左邊休息。 – Shehzi

您可以在瀏覽器中使用開發人員工具，點擊該工具並查看從哪裏獲取其樣式？ – Leeish

我對您的問題有一個解決方案，我添加了snippe t代碼在這裏，只需在html中添加一個類（center-align），並在自定義樣式表中給出樣式（文本對齊）。

在HTML的頭部分

不要忘記添加自定義樣式表波紋管引導樣式表

<head> 
    <link href="../bootstrap.min.css" rel="stylesheet"/> 
    <link href="../custom-style.css" rel="stylesheet"/> 
</head> 
<body></body>

.center-align{ 
 
    text-align:center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <h2>Condensed Table</h2> 
 
    <table class="table table-condensed"> 
 
    <thead> 
 
     <tr> 
 
     <th>Firstname</th> 
 
     <th>Lastname</th> 
 
     <th class="center-align">Email</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td>John</td> 
 
     <td>Doe</td> 
 
     <td>[email protected]</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Mary</td> 
 
     <td>Moe</td> 
 
     <td>[email protected]</td> 
 
     </tr> 
 
     <tr> 
 
     <td>July</td> 
 
     <td>Dooley</td> 
 
     <td>[email protected]</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

來源

2016-08-10 19:29:22

「.text-center」類是Bootstrap的本地對象類。您的解決方案有效，但它創建了一個已經存在的類的副本。請參閱：http：//getbootstrap.com/css/#type-alignment –

當然是的，但我在這裏說的簡單的方法來覆蓋引導樣式與您的自定義樣式，我只是添加「中心對齊」作爲樣本類。您可以根據需要將任何樣式添加到此類（它不是關於文本對齊），它將覆蓋引導樣式。關鍵是您必須正確鏈接引導程序和自定義樣式表。謝謝， –

是的。與班級名稱有衝突。 '.center-align {text | align：center; }'爲我工作。非常感謝你們。 – Shehzi

就在的.text中心類添加到要對齊到中心

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<table class="table table-hover"> 
 
    <thead> 
 
    <tr> 
 
     <th>#</th> 
 
     <th class="text-center">First Name</th> 
 
     <th>Last Name</th> 
 
     <th>Username</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <th scope="row">1</th> 
 
     <td>Mark</td> 
 
     <td>Otto</td> 
 
     <td>@mdo</td> 
 
    </tr> 
 
    <tr> 
 
    <th scope="row">2</th> 
 
    <td>Jacob</td> 
 
    <td>Thornton</td> 
 
    <td>@fat</td> 
 
    </tr> 
 
    <tr> 
 
     <th scope="row">3</th> 
 
     <td>Larry</td> 
 
     <td>the Bird</td> 
 
     <td>@twitter</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

的那些

來源

2016-08-10 18:59:34

這將工作。但我想用CSS來做。得到了解決方案。與班級名稱有衝突。 – Shehzi

如何覆蓋CSS來更改<th>引導程序

回答

相關問題