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

【问题标题】：How to override Bootstrap css on Table element and attributes如何在 Table 元素和属性上覆盖 Bootstrap css
【发布时间】：2020-09-24 02:31:01
【问题描述】：

我有一个大的ASP.Net 应用程序，我正在尝试向其中添加一个JQuery/Bootstrap 多选下拉列表（无法将它添加到Fiddle - 到大）。我正在使用 Bootstrap CDN/API 添加多选和通用 Bootstrap css and js。我的应用程序中有一个表。在我添加 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"/>

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

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

我什至尝试创建一个类（见上文和下文）来覆盖任何 Bootstrap id 或类，但它似乎不起作用（该表是在 @ 中的 scenarios id 下动态创建的987654334@ 文件）。还有什么我可以尝试让word-wrap 工作的吗？：

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

【问题讨论】：

white-space: nowrap 存在吗？如果是，请更改为white-space: normal'
你的意思是在 Bootstrap css 中？由于我是通过 cdn 引入 Bootstrap，我是否应该将它（空白：正常）添加到自定义 css 中？
由于看不到真正的DOM，我猜不换行的原因是white-space已经设置为nowrap，需要在自定义css中更改。
问题：我会在什么 id/class/element 下添加 css 属性{white-space: normal}？ id="scenarios" ?
只要设置在离文本最近的标签上

标签： css asp.net twitter-bootstrap attributes

【解决方案1】：

经过大量研究，这里的问题是我使用的通用引导程序的版本。我查看了多选 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，它就可以工作了（当然是我的覆盖类）。

【讨论】：