Question

我对twitter bootstrap感到困惑。我在fieldset里面有传奇标签。这是我的代码：

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

这是非常简单的代码，它的结果可以在这里查看： http://jsfiddle.net/zono/ApzWW/

在引导嵌入之后，我对这些dom元素有非常不同的看法。结果可以在这里查看： http://jsfiddle.net/zono/ApzWW/1/

如何重置fieldset和legend元素行为？

我将非常感谢所有方法的想法和建议。

祝你好运。

Answer 1

你真的需要在你自己的样式表中覆盖Bootstrap样式下面的内容应该可以解决这个问题......

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;
}

这是一个小提琴：

http://jsfiddle.net/ApzWW/2/

Answer 2

您可能需要考虑在bootstrap中使用面板作为替代，因为它已经嵌入了样式。这是示例

CSS（从@Billy获得最多回答）与左对齐：

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

HTML：

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

输出：

http://cdpn.io/pJuDB

Answer 3

如果你在执行 bootstrap 后仍然没有得到图例上的原始布局，尝试设置css

legend { float: none !important; }

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

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

3 个答案: