HTML / CSS / JS / Bootstrap - Aligning content - html

Question

I am working on creating a form page.
I have broken the problem into three meta challenges:
Creating the navigation within the form
Producing all the various inputs for the form
Appropriately display items from #2 based on selections in #1.
Right now, I am working on item #2
I have attached the output of my code from within Coda 2
I'm using an accordion for #1 and it appears to work just fine.
When I add the first two items from #2, they also appear to work just fine, staying aligned expected next to the accordion.
Ideally, what I want to do is align the lower radio buttons as well as any subsequent form inputs so they are immediately below the radio button/text inputs that are outside the sidebar and do not wrap under the accordion and into the sidebar. That is what is happening now.
I'm obviously missing something about how to apply my content within the bootstrap grid appropriately using containers, rows and class=col-md-n.
Marston
Here is what I think is the relevant code:
<!-- standard document stuff + jumbotron --->
<div class="container-fluid">
<div class="sidebar">
<div class="col-md-2">
<div class="panel-group" id="accordion">
<!-- NAVIGATION ITEMS --->
<!-- lots of working code that produces the accordion --->
</div>
</div>
</div>
<hr/>
<!-- radio buttons --->
<form class="form-horizontal">
<fieldset>
<!-- bunch of working code here that produces radio buttons --->
</fieldset>
</form>
<hr/>
<!-- Text input --->
<div class="main Content active Content">
<form role="form">
<div class="col-md-3">
<!-- more code here that produces text input --->
</div>
<!-- repeats for each form group --->
<!-- more code that works --->
</form>
</div>
</div>
<!-- check box section _-->
<!-- Preferred Contact Time --->
<form role="form">
<fieldset>
<div class="form-group">
<label class="col-md-3 control-label" for="radios1">Available Weekdays</label>
<div class="col-md-3">
<!-- Lots of radio button code --->
</div>
</div>
<!-- Repeats for 2nd set --->
</fieldset>
</form>

Answer 1

For disclosure, I haven't tasted your code.
From a quick look I have noticed that you're not putting your "col"s into rows. This will cause your layout to act strange.
Standard way to structure your elements is to use col inside row inside container :
<div class="container-fluid">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-9"></div>
</div>
</div>
Hope that helps.