传说中使用Bootstrap的微弱线条

Question

我有当前的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>

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

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

Answer 1

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

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

Answer 2

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