如何连续对齐标签和日期时间选择器答案

【问题标题】：how to align label & date time picker in a row如何连续对齐标签和日期时间选择器
【发布时间】：2017-03-24 12:45:54
【问题描述】：

我试图将控件保持在同一行，但它没有落入同一行。

<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

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

【问题讨论】：

既然你没有提供任何CSS，那么在包含元素的<div> 上设置display: inline-block; 怎么样？这就是为什么人们不使用bootstrap 的原因——它最终会变得一团糟。这应该是一个<fieldset> 与<label>s 和<inputs>，仅此而已。根本不需要<div>s，真的。
另外，使用浏览器检查您的 css。你会看到col-sm-3 类已经分配了float: left，所以这是多余的/重复的（并且通常使用内联样式是不好的做法）：<div class="col-sm-3" style="float:left" ;>
@junkfoodjunkie - 虽然我实际上不是一个巨大的引导程序粉丝，但使用它并没有什么问题，而且它不需要最终变得一团糟。跨度>
确实如此。它为不存在或不应该存在的问题提供解决方案，并且在大多数情况下，鼓励在每个元素上使用特定于样式的类，通常是一堆。如果您知道自己在做什么，它还经常倾向于添加一堆完全不需要的 HTML 包装器。这是一个拐杖，而且是一个糟糕的拐杖。

标签： javascript html css twitter-bootstrap-3

【解决方案1】：

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

代码

<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

确保你在你的项目中正确链接引导程序

【讨论】：