Twitter bootstrap 嵌入twitter引导后重置字段集和图例行为

我对推特引导有一点困惑。我在字段集中有图例标记。 这是我的代码：

<form>
    <fieldset>
        <legend>Test legend</legend>
        Some text .. 
    </fieldset>
</form>

测试图例
一些文字。。

这是一个非常简单的代码，其结果可在此处查看：

在bootstrap嵌入之后，我对这些dom元素有了非常不同的看法。 可在此处查看结果：

如何重置字段集和图例元素行为

我将非常感谢各方提出的想法和建议

---

致以最良好的祝愿

你真的只需要在你自己的样式表中覆盖引导样式，像下面这样的东西就可以了

legend {
    display: block;
    width: auto;
    padding: 0 5px;
    margin-bottom: 0;
    font-size: inherit;
    line-height: inherit;
    border: auto;
    border-bottom: none;
}

fieldset {
    border: 2px groove threedface;
    padding: 5px;
}

这是一把小提琴：

---

你可能想考虑在Bootstrap中使用面板作为替代，因为它已经嵌入了样式。这是一个例子

CSS（取自@Billy Most answer），左对齐：

legend 
{
  width: auto;
  padding: 0 5px;
  margin-bottom: 0;
  font-size: inherit;
  line-height: inherit;
  border-bottom: none;
  text-align: left;
}

HTML:

排序/筛选
场集内部

输出：

---

如果在实现引导后，您仍然无法在legend上获得原始布局， 尝试设置css

图例{float:none！重要；}

这是因为我可以看到引导正在将图例设置为float:left

<fieldset class="panel panel-default col-md-5">
  <legend>Sort By/Filter</legend>
  Inside the fieldset
</fieldset>