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内联，例如这样：

我的问题是：是否可以负责任地更改实际布局？（我所见过的都是改变造型），如果是这样，怎么办呢？是否有@media等效的HTML？

我甚至不知道我用来找到更多资源的术语。理想情况下，我希望它不依赖于Javascript（看起来它会是hacky），除非这是它常用的方式。

Answer 1

派克你好。

使用的代码少得多，你可以这样做。只需使用Bootstrap hidden-xx类。

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

使用标题/更改布局制作响应式表单

1 个答案: