Html 有响应的引导表单没有响应

我试图建立一个表单使用引导和需要它是响应太多。也就是说，它需要从4列布局到3到1列布局，在宽度上结束

我的代码位于 使用流体更新仍不工作

您会注意到，最初我将其设置为4列。但是，当我调整大小时，它不会变成3列。我需要这成为3列，然后作为宽度减少到2，然后到1列（又名响应）。此外，柱需要垂直和水平对齐。这也没有发生。我做错了什么？我似乎不明白。提前谢谢

<form class="form-horizontal" name="submitDetails" acttion="#">
  <fieldset>
    <div class="control-group oneLine">
      <label class="control-label" for="custom1">1. Did you telephone us?</label>
      <div class="controls">
        <label class="radio span2" for="">
          <input name="custom1" id="custom1" value="Yes" checked="checked" type="radio">
          Yes </label>
        <label class="radio span2" for="">
          <input name="custom1" id="custom1" value="No" type="radio">
          No </label>
      </div>
    </div>
    <div class="control-group  oneLine">
      <label class="control-label" for="custom2">2. How did you hear about us?</label>
      <div class="controls">
        <div class="row-fluid">
          <label class="radio span3" for="">
            <input name="custom2" id="custom2" value="1" checked="checked" type="radio">
            Newspaper </label>
          <label class="radio span3" for="">
            <input name="custom2" id="custom2" value="2" type="radio">
            Billboard </label>
          <label class="radio span3" for="">
            <input name="custom2" id="custom2" value="3" type="radio">
            Yellow Pages </label>
          <label class="radio span3 " for="">
            <input name="custom2" id="custom2" value="4" type="radio">
            Radio </label>
        </div>
        <div class="row-fluid">
          <label class="radio span3" for="">
            <input name="custom2" id="custom2" value="5" type="radio">
            Google / Internet </label>
          <label class="radio span3" for="">
            <input name="custom2" id="custom2" value="23" type="radio">
            White Pages </label>
          <label class="radio span3" for="">
            <input name="custom2" id="custom2" value="7" type="radio">
            Referral </label>
          <label class="radio span3" for="">
            <input name="custom2" id="custom2" value="8" type="radio">
            Television </label>
        </div>
        <div class="row-fluid">
          <label class="radio span3" for="">
            <input name="custom2" id="custom2" value="9" type="radio">
            Familiar with area </label>
          <label class="radio span3" for="">
            <input name="custom2" id="custom2" value="10" type="radio">
            Magazine </label>
          <label class="radio span3" for="">
            <input name="custom2" id="custom2" value="21" type="radio">
            Catalogue </label>
          <label class="radio span3" for="">
            <input name="custom2" id="custom2" value="25" type="radio">
            Our website </label>
        </div>
        <div class="row-fluid">
          <label class="radio inline" for="">
            <input name="custom2" id="custom2" value="24" type="radio">
            1300 Number </label>
        </div>
      </div>
    </div>
<br/>
<div align="right"><button>SUBMIT</button></div>
  </fieldset>
</form>


    <style type="text/css">
body {
    background-color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    max-width: 640px;
    margin: 0 auto;
}
.oneLine .controls {
    background-color: #d8d8d8;
    margin:0px;
    display:inline-block;
    width:100%;
}
.control-group.oneLine > label {

    float: none;
    text-align: left;
    width: 100%;
}
.error {
    color: #ff0000;
}
.radio.inline{
    margin-bottom:auto;
    vertical-align: auto;
}
</style>

1.你给我们打电话了吗？
对
不
2.你是怎么听说我们的？
报纸
广告牌
电话号码薄、信息查询
无线电
谷歌/互联网
白页
送交
电视机
熟悉区域
杂志
目录
我们的网站
1300号


提交
身体{
背景色：#ffffff；
字体系列：Arial、Helvetica、无衬线字体；
字体大小：12px；
最大宽度：640px；
保证金：0自动；
}
.oneLine.Control{
背景色：#d8d8d8；
边际：0px；
显示：内联块；
宽度：100%；
}
.control-group.oneLine>标签{
浮动：无；
文本对齐：左对齐；
宽度：100%；
}
.错误{
颜色：#ff0000；
}
.radio.inline{
页边距底部：自动；
垂直对齐：自动；
}

基于您在JSFIDLE上使用的css，以及您在span2/span3类上使用的css

除非您想使用自定义CSS，否则此版本的引导不会提供随着视口的减少而从4列移动到3列、从2列移动到1列的选项。在768px以下的视口中，四列将简单地折叠为一列

你考虑过使用吗

它已经用新的选项取代了旧的.spanX类，如.col-sm-X和.col-md-Y，这些选项将允许您执行所描述的操作。有关详细信息，请参阅

祝你好运

试验
2.你是怎么听说我们的？
报纸
广告牌
电话号码薄、信息查询
无线电
谷歌/互联网
白页
送交
电视机
熟悉区域
杂志
目录
我们的网站
1300号
提交

谢谢，大卫。我将不得不更仔细地查看规范。看一下bootstrap3规范，它似乎就是我想要的。多好的一种度过周六的方式：）看起来不错@Himu你会发现在Bootstrap 3中.container流体div被删除，你使用了.container。在@davidtairoa有一个关于“移动优先”实践的很好的总结，非常感谢。不过我有个问题。Bootstrap3不支持Ie7对吗…？：（是否有IE7的解决方法？IE7的官方支持已被放弃。这可能对您有效，但我自己还没有尝试：。祝您好运！

将最外层的.container更改为.container fluid，从而将任何固定宽度的网格布局转换为全宽度布局。

~。看起来像

class=“container fluid”

在

3.1

中返回业务。