0

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

小提琴：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>
4

1 回答 1

0

如果我理解正确，您想将 3 个控件逐行放在左侧，将图表的 div 放在右侧。您应该将所有控件放在左侧边栏中并使用引导程序的“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>
于 2013-07-08T03:59:36.920 回答