侧栏小部件的Bootstrap 2网格问题

Question

我正在尝试将标签和输入和图标全部放在侧边栏小部件区域的同一行上。它应该是这样的（编辑：不确定为什么但是图像显示在铬中而不是FF上的SO）

这就是我到目前为止所拥有的。我似乎无法获得保存行上的标签和输入。他们不停地四处走动。

这是一个小提琴 http://jsfiddle.net/#&togetherjs=p6omqsAoyN

这是HTML。任何人都可以告诉我如何将它们全部放在同一行上，使它看起来像上面的图像？

<div class="roster-reports module">
    <h3>Reports</h3>
    <div class="upper" >
        <h5 class="strong">Generate Report</h5>

        <ul class="row-fluid stat-pending">
            <li class="span4">
                <label for="inputReportFromDate" class="control-label">From Date</label>
            </li>
            <li class="span4">
                <input type="date" class="form-control" width="2" id="inputReportFromDate">
            </li>
            <li class="span4">
                <i class=" icon-calendar"></i>
            </li>
        </ul>




            <div class="">
                <div class="">
                    <label for="inputReportToDate" class="control-label">To Date</label>
                </div>
                <div class="">
                    <input type="date" class="form-control" id="inputReportToDate">
                    <i class="icon-calendar"></i>
                </div>
            </div>

            <div class="">
                <div class="">
                    <label for="selectReportType" class="control-label">Report Type</label>
                </div>
                <div class="">
                    <select id="inputReportType" class="form-control">
                        <option value="Query History">Query History</option>
                        <option value="DAS Alerts">DAS Alerts</option>
                    </select>
                </div>
            </div>
            <div class="">
                <div class="">
                    <label for="selectReportType" class="col-lg-2 control-label">Report Format</label>
                </div>
                <div class="">
                    <select id="selectReportFormat" class="form-control">
                        <option value="PDF">PDF</option>
                        <option value="CSV">CSV</option>
                        <option value="XLXS">XLXS</option>
                    </select>
                </div>
            </div>

            <div class="">
                <div class="">
                    <button id="buttonRosterReportsGenerate" type="submit" class="btn btn-primary">Generate</button>
                </div>
            </div>




    </div>
</div>

Answer 1

我不确定你的侧边小部件区域＆＃34;究竟是什么意思，但在引导程序中实现所需内容的常用方法是在.form-group {.form-horizontal { {1}}。修改后的标记：

<form>

看小提琴 - ＆gt; http://jsfiddle.net/h159f8nw/

正如我所写，我不确定你是如何使用它的，这个小提琴并没有完全符合＆＃34;生成报告＆＃34;就像在图片中一样，但是<div class="roster-reports module"> <h3>Reports</h3> <div class="upper"> <form class="form-horizontal" role="form"> <div class="form-group"> <h5 class="strong">Generate Report</h5> </div> <div class="form-group"> <label for="inputReportFromDate" class="control-label">From Date</label> <input class="form-control" id="inputReportFromDate" type="date" width="2"/> <i class=" icon-calendar"></i> </div> <div class="form-group"> <label for="inputReportToDate" class="control-label">To Date</label> <input class="form-control" id="inputReportToDate" type="date"/> <i class=" icon-calendar"></i> </div> <div class="form-group"> <label for="selectReportType" class="control-label">Report Type</label> <select class="form-control" id="inputReportType"> <option value="Query History">Query History</option> <option value="DAS Alerts">DAS Alerts</option> </select> </div> <div class="form-group"> <label for="selectReportType" class="control-label">Report Format</label> <select class="form-control" id="selectReportFormat"> <option value="PDF">PDF</option> <option value="CSV">CSV</option> <option value="XLXS">XLXS</option> </select> </div> <div class="form-group"> <label class="control-label"></label> <button class="btn btn-primary" id="buttonRosterReportsGenerate" type="submit">Generate</button> </div> </form> </div> </div> 和.form-group是无法实现的。