Question

我在网站上使用bootstrap，这一部分让我烦恼。当它达到一定长度时，它会开始调整输入的大小，但是在日期和时间的情况下，它也会将它们放到不需要的新行上。

如果它们一起伸展到与其他输入框相同的空间，看起来很不错，但它们不需要如此宽，所以我希望它保持在同一条线上（在相同的尺寸比率），直到给出一个小得多的宽度。

以下是我所拥有的代码的修剪版本：

<div class="row">
  <div class="col-sm-8">
    <div class="form-group">
      <input name="date" type="text" placeholder="dd/mm/yyyy" class="form-control">
    </div>
  </div>
  <div class="col-sm-4">
    <div class="form-group">
      <input name="time" type="time" placeholder="hh:mm" class="form-control">
    </div>
  </div>
</div>

http://jsfiddle.net/tX3ae/653/

当宽度足够大时：

当它太小时：

Answer 1

您应该使用“xs”大小定义列，如下所示：

<div class="row">
    <div class="col-sm-8 col-xs-8">
        <div class="form-group">
            <input name="date" type="text" placeholder="dd/mm/yyyy" class="form-control">
        </div>
    </div>
    <div class="col-sm-4 col-xs-4">
        <div class="form-group">
        <input name="time" type="time" placeholder="hh:mm" class="form-control">
        </div>
    </div>
</div>

Answer 2

如果你想让他们在移动中保持大型dekstop

<div class="row">
  <div class="col-xs-8">
    <div class="form-group">
      <input name="date" type="text" placeholder="dd/mm/yyyy" class="form-control">
    </div>
  </div>
  <div class="col-xs-4">
    <div class="form-group">
      <input name="time" type="time" placeholder="hh:mm" class="form-control">
    </div>
  </div>
</div>

实际上，您可以使用xs用于手机，sm用于平板电脑，md用于dekstop，lg用于更大的dekstop，为每种屏幕尺寸配置。

在此处阅读：http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

Answer 3

这与Bootstraps grid layout有关。只要您没有为比您设置的更小的列范围指定规则，Bootstrap将考虑使用它的常用样式来处理表单的垂直布局。这就是说，如果您还指定col-xs-*规则，您将能够在更小的屏幕尺寸上获得所需的内容。如果没有，正如我所说，Bootstrap将标准化＆＃39;对于较小的尺寸。

Answer 4

试试这个：

<div class="row">
            <div class="col-xs-8">
                <div class="form-group">
                  <input name="date" type="text" placeholder="dd/mm/yyyy" class="form-control">
                </div>
            </div>
            <div class="col-xs-4">
                <div class="form-group">
                  <input name="time" type="time" placeholder="hh:mm" class="form-control">
                </div>
            </div>
        </div>

如果你想要从超小的所有设备开始使用相同的列结构，你应该使用col-xs- *前缀，请查看此页面以更好地理解Bootstrap网格系统 - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php

如果不需要，请将两个输入分成不同的行

4 个答案: