使用 Twitter Bootstrap 添加 CSS 规则答案

【问题标题】：Add CSS rules with Twitter Bootstrap使用 Twitter Bootstrap 添加 CSS 规则
【发布时间】：2013-04-22 06:00:13
【问题描述】：

我不知道如何使用 CSS。所以我在这里问。我正在创建一个 JSP 页面。我使用 Twitter Bootstrap 在我的 JSP 页面中添加了两个表。我需要为两个表添加不同的对齐方式。由于我使用 bootsrap 两个表具有相同的对齐方式。

这是我的代码

<div>
<table class="table table-bordered source">
//table 1 contents
</table>
</div>

<div>
<table class="table table-hover target">
//table 2 contents
</table>
</div>

我想将表 1 的文本居中对齐，将表 2 的文本左对齐。表 2 的标题应居中对齐，表 2 的边框应为蓝色。

所以我尝试了这个 CSS

    .table.table-hover.target td {
        text-align: left !important;
    }

    .table.table-hover.target th {
        text-align: right !important;
    }

    .table.table-bordered.source td
    {
        text-align: center !important;
    }
    .table.target
    {
            border-color:blue;
    }

它不工作。当我给予时

.table td
{
    text-align:left !important;
}

它将两个表格内容都向左对齐。我现在不使用 CSS。如何编写 CSS 规则？

【问题讨论】：

为什么要在.table td 中添加文本对齐样式？你给的第一条 CSS 规则有什么问题？

标签： css jsp

【解决方案1】：

你可能有这样的事情：

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8 />
    <title>Your page</title>
    <link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
</head>
<body>

    ...

    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
</body>
</html>

在bootstrap-responsive.css 的正下方（或者，如果您不使用响应式布局，您甚至不会使用此文件，女巫将在bootstrap.css 调用下方）。

添加一个新文件，如：

<link href="/assets/css/application.css" rel="stylesheet" type="text/css" />

并将所有覆盖规则添加到该文件中，上面的代码将如下所示：

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8 />
    <title>Your page</title>
    <link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
    <link href="/assets/css/application.css" rel="stylesheet" type="text/css" />
</head>
<body>

    ...

    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
</body>
</html>

"/assets/css/application.css" 行将表明您的代码将位于该特定路径中，根据您的需要进行更改

评论：

记得评论你的 CSS 规则，这样其他人（甚至你在 6 个月的时间里）就会明白你为什么写这个......在 CSS 中你可以添加 cmets 用 /* ... */ 包装它

例如：

/* TABLES OVERRIDE: so they look like the main theme */
.table td
{
    text-align:left !important;
}

【讨论】：