Twitter Bootstrap changes rendering of fieldset legend, why?

Question

In this ASP.NET MVC 3 project, I've just started experimenting with Twitter Bootstrap, but I notice it messes with the rendering of <fieldset> legends. What is happening to the legend rendering here, and how do I get it back to normal? That is, I want the right line to be vertically aligned with the left line again.

The standard legend rendering, pre-Bootstrap, to the left, Bootstrap-affected rendering to the right:

Update: I've found out what's causing the broken rendering, at least: Bootstrap changes the legend's width property to 100% and the border-bottom property to '1px solid'. This causes the original border to the right of the legend to be erased and a border beneath it to appear instead. The question is how this is meant to work. Maybe MVC's CSS (Site.css) is interfering with that of Bootstrap?

Solution

If you switch your stylesheet declarations so that the bootstrap is last it should correct the issue, ie:

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/css/bootstrap.min.css")" rel="stylesheet" type="text/css" />

Bootstrap styles

fieldset {
    padding: 0;
    margin: 0;
    border: 0;
}

legend {
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: 27px;
    font-size: 19.5px;
    line-height: 36px;
    color: #333;
    border: 0;
    border-bottom: 1px solid #E5E5E5;
}

default MVC Style.css styles

fieldset {
    border: 1px solid #DDD;
    padding: 0 1.4em 1.4em 1.4em;
    margin: 0 0 1.5em 0;
}

legend {
    font-size: 1.2em;
    font-weight: bold;
}

end result should look like:

vs the other way around (MVC default styles declared last)

Alternatively, get rid of the MVC stylesheet altogether and use bootstrap along with whatever custom styles you need.