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> 

希望有所帮助。