html - 无法对齐 bootstrap html 代码中的 div

Question

无法按照设计对齐 bootstrap html 代码中的 div。我正在尝试将页面左侧的下拉列表和 2 个输入框排成三行。以及页面右侧的预览部分或 div。

fiddle :http://jsfiddle.net/37gaq/1/

这是 HTML 代码:

<div class="container-fuild">
    <div class="row-fluid">
        <div class="span4">
            <div class="control-group">
                    <label class="control-label" for="chartType">Chart type</label>

                    <div class="controls">
                        <select id="chartType" ng-change="selectType(chartType)" ng-model="chartType" ng-options="c.typeValue for c in chartTypes">
                        </select>

                    </div>
                </div>
        </div>
        <div class="span8">


            <form class="form-horizontal">
                <div class="row-fluid">

                    <div class="control-group span6">
                        <label class="control-label" for="chartType">February server sale units</label>

                        <div class="controls">
                            <input type="number" min="0" max="100" ng-model="chart.data.rows[1].c[3].v"/>
                        </div>
                    </div>
                    <div class="control-group span6">
                        <label class="control-label" for="chartType">Number of grid lines</label>

                        <div class="controls">
                            <input type="number" min="0" max="100" ng-model="chart.options.vAxis.gridlines.count"/>
                        </div>
                    </div>
                </div>

            </form>

            <h2>Output</h2>

           <div id="chartDiv" style="{{chart.cssStyle}}">Preview Portion</div>


        </div>
    </div>

Answer 1

如果我没理解错的话，你想把3个控件一行一行放在左边，图表的div放在右边。您应该将所有控件放在左侧边栏内，并使用 Bootstrap 的“form-horizo​​ntal”类

以下是您问题的可能答案:

<div class="container-fuild">
    <div class="row-fluid">
        <div class="span4">
            <div class="form-horizontal">
                <div class="control-group">
                    <label class="control-label" for="chartType">Chart type</label>

                    <div class="controls">
                        <select id="chartType" ng-change="selectType(chartType)" ng-model="chartType"
                                ng-options="c.typeValue for c in chartTypes">
                        </select>

                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label" for="chartType">February server sale units</label>

                    <div class="controls">
                        <input type="number" min="0" max="100" ng-model="chart.data.rows[1].c[3].v"/>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="chartType">Number of grid lines</label>

                    <div class="controls">
                        <input type="number" min="0" max="100" ng-model="chart.options.vAxis.gridlines.count"/>
                    </div>
                </div>
            </div>
        </div>
        <div class="span8"> 
            <h2>Output</h2>

            <div id="chartDiv" style="{{chart.cssStyle}}">Preview Portion</div> 
        </div>
    </div>

</div>