Question

所以我有一个Bootstrap 3表单，我只想在整齐的行中排列一堆跨度，在移动设备上降级为堆栈：

From [station1] to [station2] at [time]

From
[station1]
to
[station2]
at
[time]

显然我可以做到这一点，而且有效：

  <div class="row">
     <div class="col-md-1">From</div>
     <div class="col-md-3"><select>...</select></div>
     <div class="col-md-1">To</div>
     <div class="col-md-3"><select>...</select></div>
     ...
  </div>

然而，如果屏幕很宽，它看起来很傻：

    From       [station1]     to      [station2]     at     [time]

如果我在没有col-X-Y类的情况下排队一些跨度，那么它们与Bootstrap的搭配并不好。如果我尝试将网格和非网格跨度或div混合在一起，它们会以奇怪而神秘的方式排序，如this JSFiddle的最后两行所示。帮助

Answer 1

Bootstrap不是解决所有问题的方法。您仍然需要编写自己的CSS。您可以使用适当的类来减小较大屏幕的列宽，但这不会有太大改进。

相反，你最好编写自己的CSS。将元素设置为inline-block，添加一些边距和填充。如果您想更进一步，可以编写自己的媒体查询来处理宽度减小的样式。

查看Bootstrap中the variables file中的第260行。

@screen-xs:                  480px;
@screen-xs-min:              @screen-xs;
@screen-phone:               @screen-xs-min;

您可以使用这些变量来创建特定于视口的CSS。

@media (max-width: $screen-xs) {
  // Change spans to block
  span.my-field {
    display: block;
    margin-bottom: 10px;
  }
}

如果您不使用Sass或Less，则可以对变量的值进行硬编码。例如，480px代替$screen-xs。

Answer 2

您可以将列包裹在较小的宽度col中，例如col-sm-5或col-sm-6 ..

<div class="row">
  <div class="col-sm-4">
     <div class="col-lg-2">From</div>
     <div class="col-lg-2"><select><option>station</option></select></div>
     <div class="col-lg-2">To</div>
     <div class="col-lg-2"><select><option>station</option></select></div>
     <div class="col-lg-2">at</div>
     <div class="col-lg-2"><select><option>time</option></select></div>
  </div>
</div>

演示：http://www.bootply.com/116599

Answer 3

另一种方法：

<span>From</span>
<br class="visible-xs visible-sm"/>
<span>...</span>
<br class="visible-xs visible-sm"/>

看起来很讨厌，但似乎很好用。我还没有发现任何问题。

混合自然宽度和Bootstrap宽度列

3 个答案: