HTML/CSS/JS/Bootstrap - 對齊內容

Question

我正在創建表單頁面。 我已經打破了問題分爲三個薈萃挑戰：

1. 形式
2. 生產的所有各種輸入的形式
3. 內創建導航基於在＃1選擇適當地顯示從＃2項。

現在，我就項目＃2的工作

我有我使用＃1手風琴連接我的代碼的輸出

內的Coda 2，它似乎工作正好。 當我添加＃2中的前兩個項目時，它們看起來工作得很好，在手風琴旁邊保持一致。

理想情況下，我想要做的是將下方的單選按鈕以及任何後續的表單輸入對齊，以使它們緊靠側邊欄外的單選按鈕/文本輸入，並且不包裹在手風琴下並進入側邊欄。這就是現在正在發生的事情。

我很明顯缺少一些關於如何使用容器，行和class=col-md-n適當地在引導網格中應用我的內容。

馬斯頓

這裏是什麼，我認爲是相關代碼：

<!-- 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

爲了公開，我還沒有嘗過你的代碼。

從快速查看我已經注意到，你沒有把你的「col」放入行中。這會導致你的佈局變得奇怪。

標準的方式來組織你的元素是利用山坳內連續在內線容器：

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-md-3"></div> 
    <div class="col-md-9"></div> 
    </div> 
</div> 

希望有所幫助。