混合自然宽度和引导宽度列答案

【问题标题】：Mixing natural width and Bootstrap width columns混合自然宽度和引导宽度列
【发布时间】：2015-01-09 19:28:52
【问题描述】：

所以我有一个 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 的最后两行所示。帮忙？

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案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。

【讨论】：

【解决方案2】：

您可以将列包装在较小宽度的列中，例如 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

【讨论】：

这看起来仍然不正常，因为间隙比应有的要大。我认为将 Bootstrap 列用于此类事情不是一个好主意。
看起来可以忍受，但如果你“文本右”对齐文本 div，所以它们在选择旁边。（为什么你们两个互相反对？）
我不知道为什么我被否决了。 @Mohamad 的解决方案要困难得多，因为它需要自定义 Bootstrap 构建。当这个 Bootstrap 解决方案开箱即用时，为什么要这样做——Bootstrap 甚至在他们的文档中有嵌套列的示例：getbootstrap.com/css/#grid-nesting
@jpatokal 我不确定是否反对。 @Skelly，我的解决方案不需要“自定义构建”——那是什么？我的解决方案需要几行额外的 CSS。 Bootstrap 应该在没有任何自定义 CSS 的情况下完成所有事情的想法是荒谬的。此外，row 和 col 等类不是语义类，仅用于快速原型设计。文档建议使用提供的 mixins。老天禁止任何人编写自定义的 CSS 行，因为我们希望 Web 看起来相同——就像 Bootstrap。在需要 Bootstrap 之后，您仍然可以（并且应该）将自己的 CSS 添加到站点。
使用 LESS 变量 (getbootstrap.com/customize) 正在自定义 Bootstrap 基线 CSS .. 或要求您始终在文件中包含 LESS

【解决方案3】：

另一种方法：

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

看起来很糟糕，但似乎工作得很好。我还没有发现任何问题。

【讨论】：