Styling ASP.net controls with bootstrap - asp.net

Question

I am trying to style my quiz with checkbox/radio button lists controls in asp.net to match that of the bootstrap static variants found here: http://getbootstrap.com/javascript/#buttons-checkbox-radio
This works fine using the following lines of code:
<asp:RadioButtonList ID="rblQuestion1" runat="server" RepeatDirection="Vertical" RepeatLayout="Flow" CssClass="btn-group" data-toggle="buttons">
<asp:ListItem class="btn btn-default radio-inline" Value="1">Answer One</asp:ListItem>
<asp:ListItem class="btn btn-default radio-inline" Value="2">Answer Two</asp:ListItem>
</asp:RadioButtonList>
But i have three problems:
The items are rendered in steps like so: http://i.imgur.com/aM1A1Gh.png, I believe the cause to be the "RepeatLayout=Flow" property, but without this element isn't displayed as shown on the bootstrap website http://getbootstrap.com/javascript/#buttons-checkbox-radio
When displayed on a smaller screen, some of the items do not fit as the text within them is quite long, what would be the best way to fix this? Image: http://imgur.com/OpCSbLD
and lastly:
After the form is submitted, it postbacks to the page disabling the control via VB code, and highlighting the correct answer. However, this removes the element styling
This is the HTML displayed when taken from the browser:
<span id="ContentMain_wizQuestions_rblQuestion1" disabled="disabled" class="aspNetDisabled btn-group" data-toggle="buttons">
<span class="aspNetDisabled">
<input id="ContentMain_wizQuestions_rblQuestion1_0" type="radio" name="ctl00$ContentMain$wizQuestions$rblQuestion1" value="1" disabled="disabled"><label for="ContentMain_wizQuestions_rblQuestion1_0">Answer One</label></span><br>
<span class="aspNetDisabled"><input id="ContentMain_wizQuestions_rblQuestion1_1" type="radio" name="ctl00$ContentMain$wizQuestions$rblQuestion1" value="2" disabled="disabled">
<label for="ContentMain_wizQuestions_rblQuestion1_1">Answer Two</label></span><br>
<span class="aspNetDisabled"><input id="ContentMain_wizQuestions_rblQuestion1_2" type="radio" name="ctl00$ContentMain$wizQuestions$rblQuestion1" value="3" checked="checked" disabled="disabled">
<label for="ContentMain_wizQuestions_rblQuestion1_2">Answer Three</label></span><br>
<span class="aspNetDisabled"><input id="ContentMain_wizQuestions_rblQuestion1_3" type="radio" name="ctl00$ContentMain$wizQuestions$rblQuestion1" value="4" disabled="disabled">
<label for="ContentMain_wizQuestions_rblQuestion1_3">Answer Four</label>
</span>
I believe the aspNetDisabled span tag, is interferring with the bootstrap styles. How can i make them persist through this, or is there an alternative better way to disable an element?
Thanks

Answer 1

Read the following MSDN document
That is because of controlRenderingCompatibilityVersion. If your framework version is above 4, then this property will be set default to "pages controlRenderingCompatibilityVersion="4.0"
Change the controlRenderingCompatibilityVersion="3.5" and you can see class="aspNetDisabled" will be removed from html.
Web Control facility after .NET version 3.5
Method 1 :
please add following in your web.config for remove the aspNetDisabled tag
<system.web>
<pages enableEventValidation="true" controlRenderingCompatibilityVersion="3.5" />
</system.web>
Method 2 :
you can also ended up doing the following, which effectively removes the insertion of the extra class for disabled items.
void Application_Start(object sender, EventArgs e)
{
// Code that runs on application startup
WebControl.DisabledCssClass = "";
}