嵌入 Twitter 引导程序后重置字段集和图例行为 [英] Reset fieldset and legend behaviour after embeding twitter bootstrap

问题描述

我对 twitter bootstrap 有一个困惑.我在字段集中有图例标签.这是我的代码:

I have a one confusion with twitter bootstrap. I have legend tag inside fieldset. This is my code:

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

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

It is very simple code and it result can be viewed here: http://jsfiddle.net/zono/ApzWW/

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

After bootstrap embedding I have very different view of these dom elements. The result can be viewed here: http://jsfiddle.net/zono/ApzWW/1/

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

How I can reset fieldset and legend element behaviour?

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

I would be very grateful to all means ideas and recommendations.

最好的问候.

推荐答案

你真的只需要在你自己的样式表中覆盖 Bootstrap 样式 像下面这样的东西应该可以解决问题......

You really just need to overwrite the Bootstrap styling in your own style sheet Something like the below should do the trick...

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/

这篇关于嵌入 Twitter 引导程序后重置字段集和图例行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！