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

Question

现在我有一个表单，其中包含多行输入和一组作为标题放在顶部的标签。

代码:

<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 内联，像这样:

我的问题是:是否可以负责任地更改实际布局？ (我所看到的只是改变样式)，如果是这样，如何做到这一点？是否有 @media 等同于 HTML？

我什至不知道我会用这个词来找到更多的资源。理想情况下，我希望它不依赖于 Javascript(这似乎很老套)，除非这是它完成的常见方式。

Answer 1

帕克 你好。

使用更少的代码，你首先在这里，你可以这样做。只需使用 Bootstrap hidden-xx类(class)。

我在这里所做的就是使用第一组代码并将您的标签添加到第二行并包含这些类。
<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 -->