如何对齐标签&日期时间选择器连续

时间:2016-11-10 13:09:55

标签: javascript html css twitter-bootstrap-3

我试图将控件保持在同一行,但它不会落入一行。

<div class="form-group">

                <div class="col-sm-3" style="float:left" ;>
                    <div class="form-group">
                        Starts On :
                        <div class='input-group date' id='datetimepicker1'>
                            <input type='text' class="form-control" />
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-calendar"></span>
                            </span>
                        </div>
                    </div>
                </div>

                <div class="col-sm-9">
                    <label>Ends</label>  

                    <div class="form-group">

                        <label class="radio-inline">&nbsp;<input type="radio" name="optradio">Never</label>
                        <label class="radio-inline"><input type="radio" name="optradio">After</label>
                        <input style="height:30px;width:50px" type="text" name="fname"> Occurances

                        <label class="radio-inline">
                            <input type="radio" name="optradio">On
                        </label>

                        <div class='input-group date' id='datetimepicker1' style="width:150px;">
                            <input type='text' class="form-control" />
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-calendar"></span>
                            </span>
                        </div> 
                    </div>                  
                </div>
            </div>

Output

JSFiddle

我必须在开启单选按钮右侧显示日期时间选择器。

1 个答案:

答案 0 :(得分:0)

我希望这就是你要找的东西

enter image description here

<div class="form-group">

    <div class="col-sm-3" style="float:left" ;>
        <div class="form-group">
            Starts On :
            <div class='input-group date' id='datetimepicker1'>
                <input type='text' class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>

    <div class="col-sm-9">
        <label>Ends</label>  

        <div class="form-group">

            <label class="radio-inline">&nbsp;<input type="radio" name="optradio">Never</label>
            <label class="radio-inline"><input type="radio" name="optradio">After</label>
            <input style="height:30px;width:50px" type="text" name="fname"> Occurances

            <label class="radio-inline">
                <input type="radio" name="optradio">On
            </label>

            <div class='input-group date' id='datetimepicker1' style="width:150px;">
                <input type='text' class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div> 
        </div>                  
    </div>
</div>

工作fiddle

确保你正确链接你的项目中的bootstrap