使元素跳过Bootstrap CSS

Question

我正在尝试使用PHP，jQuery和Bootstrap为仪表板创建一个DIV生成器。在仪表板中我有一些输入，并且使用jQuery，我根据输入值操作DIV的样式和内容，因此它在将值传递给PHP之前显示DIV的预览。问题是Bootstrap将一些自己的CSS放在我的div上，它看起来不像最终结果。

它在非Bootstrap页面上的显示方式：

它在仪表板上的显示方式：

这是DIV的CSS（除了style属性中的内容之外：

.rectangular{
    float:left;
    width:40%;
    padding-left:10%;
    padding-bottom:25px;
}

.rectangular_1 {
    height: 10px;
    position: relative;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    width: 100%;
    -webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
    -moz-box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3);
    box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3);
}

.rectangular_1 > span {
    display: block;
    height: 100%;
    -webkit-border-top-right-radius: 2px;
    -webkit-border-bottom-right-radius: 2px;
    -moz-border-radius-topright: 2px;
    -moz-border-radius-bottomright: 2px;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    -webkit-border-top-left-radius: 2px;
    -webkit-border-bottom-left-radius: 2px;
    -moz-border-radius-topleft: 2px;
    -moz-border-radius-bottomleft: 2px;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    background: rgb(122,188,255);
    position: relative;
    overflow: hidden;
}

.spoll { -webkit-box-sizing: border-box;;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
    padding-top: 5px;
    }

HTML：

<div class="spoll" style="width: 300px; border: 1px solid #0099cc; border-radius: 0px; color: #0099cc; background-color: #FFF;">
  <p id="prevTitle"><b>Do you wanna' have some fun?</b></p>
  <p id="prevTopic" style="font-size: 13px;"></p>
  <p>First</p>
  <div class="rectangular_1" style="border: 1px solid #6699CC"> <span style="width:60%; background: #6699CC"></span> </div>
  <p>Second</p>
  <div class="rectangular_1" style="border: 1px solid #6699CC"> <span style="width:60%; background: #6699CC"></span> </div>
  <p>Blah</p>
  <div class="rectangular_1" style="border: 1px solid #6699CC"> <span style="width:60%; background: #6699CC"></span> </div>
  <br>
  <br>
  <input id="submit" name="submit" type="submit" value="Vote" style="border-radius: 5px; border: none; padding: 10px; width: 100%; margin: auto; background-color: #0099cc; color:#FFF;" />
</div>

我无法使用IFrame，因为我需要使用表单值更新DIV，所以......任何建议？

我试图在Bootstrap的css <link src="">部分之后以及在我向您展示的CSS之前使用标题内here的所选答案，但它没有用。

Answer 1

您可以为div容器提供ID。然后，你在每个选择器之前的ID。这使得您的css规则比bootstrap中的规则更具体。由于浏览器使用了最具体的浏览器，因此您可以使用它。

但是，这不会禁用从引导程序设置的css属性，但不能禁用代码中的css属性。要删除这些，您必须在代码中实现它们。此致，我知道没有解决方案来获取没有bootstrap的页面的默认属性，因此您必须调整每个页面的值。

最后您必须考虑，如果您的每个页面包含最多一个具有此ID的容器，则使用ID的解决方案仅生成有效代码。如果您有更多容器，则每个容器都需要唯一的ID。

此解决方案也可以使用类完成。在这种情况下，您必须尝试它是否适用于您的页面。

另一个解决方案是在您的css规则中使用！important标记，而不是添加类或ID。如果你知道为什么你使用重要的，它不仅是另一个坏css规则的错误修复，它甚至不是坏风格。 如果您使用！important，最好添加注释，以便您使用它，以便其他开发人员（或您以后）不会对此感到疑惑或意外删除它。