如何在 Table 元素和属性上覆盖 Bootstrap css

Question

我有一个大型 ASP.Net 应用程序，我正在尝试向其中添加一个 JQuery/Bootstrap 多选下拉列表（无法将其添加到 Fiddle - 太大）。我正在使用 Bootstrap CDN/API 添加多选和通用 Bootstrap css and js。我的应用程序中有一个 table 。在我添加 Bootstrap 之前，它看起来像这样。

添加bootstrap后，它看起来像这样：

基本上，word-wrap: break-word; 属性似乎搞砸了。按照其他帖子的建议，我在自定义 css 样式表之前添加了 Boostrap：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"/>
<script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script> 
<script type="text/javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js" type="text/javascript"></script> 
<link rel="stylesheet" href="//js.arcgis.com/3.26/esri/css/esri.css?parameter=1"/> <%--"parameter= 1" prevents intellisense error --%>
<link rel="stylesheet" href="Content/Style/Style.css"/>

table 有自己的元素 ID 和名为 #checkBoxesTable 的子元素。

 #checkBoxesTable > tr > td {
     word-wrap: break-word;
 }
 ...
 .bootstrap-overrides #checkBoxesTable > tr > td {
     padding: 10px;
     word-wrap: break-word;
 }

我什至尝试创建一个 class（见上文和下文）来覆盖任何 Bootstrap id 或 classes 但它似乎不起作用（ table 是在 Default.asmx 文件中的 scenarios id 下动态创建的）。还有什么我可以尝试让 word-wrap 工作的吗？:

<div id="scenarios" class="bootstrap-overrides"></div>

Answer 1

经过大量研究，这里的问题是我使用的通用 bootstrap 版本。我查看了 multi-select gitHub 文档并查看了 index.html 文件中的示例，该示例使用了以下内容：

<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.min.js"></script>

一旦我将版本升级到 3.3.2，它就可以工作了（当然是我的覆盖 class）。

如何在 Table 元素和属性上覆盖 Bootstrap css

How to override Bootstrap css on Table element and attributes

css

asp.net

attributes

twitter-bootstrap