制作带有标题的响应式表单/更改布局

Question

现在我有一个form，其中包含多行inputs 和一组labels 作为标题放在顶部。

代码：

<span id="labels" class="row">
  <span id="labela" class="col-sm-2 col-sm-offset-2">
    <label>Label A</label>
  </span>
  <span id="labelb" class="col-sm-2">
    <label>Label B</label>
  </span>
  <span id="labelc" class="col-sm-2">
    <label>Label C</label>
  </span>
  <span id="labeld" class="col-sm-2">
    <label>Label D</label>
  </span>
</span>

<!-- Input Row 1-->
<span class="row inputRow">
  <span class="inputA" class="col-sm-2 col-sm-offset-2">
    <input type="text">
  </span>
   <span class="inputB" class="col-sm-2">
    <input type="text">
  </span>
   <span class="inputC" class="col-sm-2">
    <input type="text">
  </span>
   <span class="inputD" class="col-sm-2">
    <input type="text">
  </span>
</span>

<!-- Input Row 2-->
<span class="row inputRow">
  <span class="inputA" class="col-sm-2 col-sm-offset-2">
    <input type="text">
  </span>
   <span class="inputB" class="col-sm-2">
    <input type="text">
  </span>
   <span class="inputC" class="col-sm-2">
    <input type="text">
  </span>
   <span class="inputD" class="col-sm-2">
    <input type="text">
  </span>
</span>

这很好用，但我试图让它响应，对于较小的设备，我希望将格式更改为内联 labels/inputs，如下所示：

我的问题是：是否可以负责任地更改实际布局？ （我所看到的只是改变样式），如果是这样，怎么做？ HTML 是否有 @media 等价物？

我什至不知道我会用什么词来查找更多关于此的资源。理想情况下，我希望它不依赖于 Javascript（它似乎很hacky），除非这是它的常用方式。

Answer 1

帕克你好。

使用您最初在此处拥有的代码少得多，您可以这样做。 只需使用引导程序hidden-xxclass。

我在这里所做的只是使用第一组代码并将您的标签添加到第二行并包含这些类。
<label class="hidden-lg hidden-md hidden-sm">

这是一个有效的Fiddle。

<div class="container col-lg-12">

    <div id="labels" class="row">
        <span id="labela" class="col-sm-2 col-xs-12">
            <label>Label A</label>
            <input type="text">
        </span>
        <span id="labelb" class="col-sm-2 col-xs-12">
            <label>Label B</label>
            <input type="text">
        </span>
        <span id="labelc" class="col-sm-2 col-xs-12">
            <label>Label C</label>
            <input type="text">
        </span>
        <span id="labeld" class="col-sm-2 col-xs-12">
            <label>Label D</label>
            <input type="text">
        </span>
    </div>

    <div id="labels" class="row spacer">
        <span id="labela" class="col-sm-2 col-xs-12">
            <label class="hidden-lg hidden-md hidden-sm">Label A</label>
            <input type="text">
        </span>
        <span id="labelb" class="col-sm-2 col-xs-12">
            <label class="hidden-lg hidden-md hidden-sm">Label B</label>
            <input type="text">
        </span>
        <span id="labelc" class="col-sm-2 col-xs-12">
            <label class="hidden-lg hidden-md hidden-sm">Label C</label>
            <input type="text">
        </span>
        <span id="labeld" class="col-sm-2 col-xs-12">
            <label class="hidden-lg hidden-md hidden-sm">Label D</label>
            <input type="text">
        </span>
    </div>


</div><!-- /.container -->