如何在引导行的单行上显示控件和文本

Question

我想在bootstrap中使用上面的html样式，但是对于md / lg显示，只能得到以下输出。 以下为xs / sm显示。

我希望避免指定文本元素的col宽度，并尝试了所有无法正确呈现的组合。 对此有任何帮助都很好，谢谢你。

     <!-- Time row -->
                        <div class="form-group">
                            <div class="row">
                                <label class="control-label col-xs-2">Time:</label>
                                <div class="col-lg-2">

                                    <select class="form-control ">
                                        <option style="font-weight:bold">Monday</option>
                                        <option>Tuesday</option>
                                        <option>Wednesday</option>
                                        <option>Thursday</option>
                                        <option>Friday</option>
                                        <option>Saturday</option>
                                        <option>Sunday</option>
                                    </select>
                                </div>

                                <div class="col-lg-3">
                                    <div class="bootstrap-timepicker">
                                        <div class="input-group">
                                            <div class="input-group-addon no-border" style="font-weight: bold;">
                                                At
                                            </div>
                                            <input type="text" class="form-control timepicker" />
                                            <div class="input-group-addon">
                                                <i class="fa fa-clock-o"></i>
                                            </div>
                                        </div><!-- /.input group -->
                                    </div><!-- /.form group -->
                                </div>
                                <div class="col-lg-3">
                                <div class="input-group">
                                    <div class="input-group-addon no-border" style="font-weight: bold;">
                                        For
                                    </div>
                                    <input type="text" class="form-control" placeholder="" />
                                </div>
                                </div>
                                <label class="control-label" style="font-weight: bold;">Minutes</label>
                            </div>
                        </div>
                        <!-- Location row -->
                        <div class="form-group">
                            <div class="row">
                                <label class="control-label col-xs-2">Location:</label>

                                <div class="col-lg-4">

                                    <select class="form-control ">
                                        <option style="font-weight:bold">Court 1</option>
                                        <option>Court 2</option>
                                        <option>Court 3</option>
                                        <option>Court 4</option>
                                        <option>Gymnasium</option>
                                        <option>Dance Studio</option>
                                        <option>Main Hall</option>
                                    </select>
                                </div>
                                <div class="col-lg-4">

                                    <select class="form-control ">
                                        <option style="font-weight:bold">Clapham</option>
                                        <option>Balham</option>
                                        <option>Brixton</option>
                                        <option>Wembly</option>
                                        <option>New York</option>
                                        <option>Paris</option>
                                        <option>Peckham</option>
                                    </select>
                                </div>
                            </div>
                        </div>

Answer 1

您是否已在父表单上使用Bootstrap的.inline-form课程？查看Bootstrap Documentation。

Answer 2

我使用了layoutit.com并获得了一个嵌套行，它提供了所需的控件和显示。

<!--Experiment 5 from layoutit.com-->
<div class="container">
    <div class="row clearfix">
        <div class="col-md-4 column">
            <form class="form-horizontal" role="form">
                <div class="form-group">
                     <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
                    <div class="col-sm-10">
                        <input type="email" class="form-control" id="inputEmail3" />
                    </div>
                </div>
                <div class="form-group">
                     <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
                    <div class="col-sm-10">
                        <input type="password" class="form-control" id="inputPassword3" />
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <div class="checkbox">
                             <label><input type="checkbox" /> Remember me</label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                         <button type="submit" class="btn btn-default">Sign in</button>
                    </div>
                </div>
            </form>
        </div>
        <div class="col-md-4 column">
            <div class="row clearfix">
                <div class="col-md-8 column">
                     <button type="button" class="btn btn-default">Default</button>
                </div>
                <div class="col-md-4 column">
                     <span class="label label-danger">Label</span>
                </div>
            </div>
        </div>
        <div class="col-md-4 column">
            <div class="row clearfix">
                <div class="col-md-8 column">
                     <button type="button" class="btn btn-default">Default</button>
                </div>
                <div class="col-md-4 column">
                     <span class="label label-default">Label</span>
                </div>
            </div>
        </div>
    </div>
</div>