传说中使用Bootstrap的微弱线条

时间:2015-02-24 20:51:50

标签: twitter-bootstrap jsp

我有当前的CSS:

fieldset.bordered {
    border: 1px groove #ddd !important;
    padding: 0 1em 1em 1em !important;
    margin: 0 0 1em 0 !important;
}
legend.bordered {
   border-style: none;
   border-width: 0;
   font-size: 14px;
   line-height: 20px;
   margin-bottom: 0;
   border-bottom:none;
}

使用具有以下内容的JSP:

      <fieldset class="bordered">
      <legend>Current Property Manager</legend>
          <form:input type="text" path="currentPropertyManager" class="form-control" placeholder="Current Property Manager Name"/><strong><form:errors path="currentPropertyManager" type="text" htmlEscape="false" class="text-danger"/></strong><br>
          <form:input type="tel" path="currentPropertyManagerPhone" class="form-control" placeholder="Current Property Manager Phone" /><strong><form:errors path="currentPropertyManagerPhone" type="text" htmlEscape="false" class="text-danger"/></strong><br>
      </fieldset>

但它会在图例下产生一条微弱的线条。

enter image description here

如何摆脱微弱的线条?我试过border = 0px并搜索SO。没有运气。

2 个答案:

答案 0 :(得分:1)

你的造型是正确的。问题是您的legend.bordered样式未应用于legend元素,因为css选择器与它不匹配。

要使其匹配,您需要将其更改为.bordered legend(或甚至fieldset.bordered legend),或将bordered类添加到legend元素(我个人而言)更喜欢第一种方法)。完成此操作后,它将不再具有假动作线,因为border-bottom样式将删除它。

答案 1 :(得分:0)

该行是应用于图例的border-bottom属性。边框底部最初设置为1px solid #e5e5e5颜色。您可以将图例的border-bottom属性设置为0px。我尝试了它作为内联样式,它的工作原理!