Basic example

Question

我使用Bootstrap 3，我有一个多个日期选择器（从 - 到）。它在计算上运行良好，但我有手机兼容性问题。我的输入组溢出屏幕，不会调整所有组的大小。

如果是小型设备，我希望将该组放在2行： - 第一个使用插件From +其datepicker - 第二个带插件To +其datepicker

我该怎么办？

我的HTML：

  <form class="form-horizontal">
        <div class="form-group">
            <div class="input-daterange" style="padding-left: 15px; padding-right: 15px" id="datepicker" >
                <div class="input-group">
                    <div class="input-group-addon">From</div>
                    <input type="date" class="form-control" name="beginDate" id="beginDate"/>
                    <div class="input-group-addon" for="endDate">To</div>
                    <input type="date" class="form-control" name="endDate" id="endDate"/>
                </div>
            </div>
        </div>
    </form>

编辑：我知道必须使用@media在css中完成，但是如何在第一个datetimepicker之后才能到达该行？

Answer 1

无论浏览器如何，Bootstrap都不支持单个输入组中的多个输入字段：

Basic example

在输入的任一侧放置一个插件或按钮。您也可以在输入的两侧放置一个。

我们不支持多个加载项。

我们不支持单个输入组中的多个表单控件。

Answer 2

这必须在css中完成。

因此，如果你看一下你的bootstrap.css并向下滚动到任何@media 746px（我认为它是用于移动设备的那么多像素），你应该看到当屏幕重新调整尺寸时它们如何处理的例子。移动设备只是一个屏幕尺寸，在计算机浏览器上非常小。

Bootstrap - 手机上的多个输入组插件

2 个答案:

Basic example