我正在尝试使用bootstrap构建一个表单，并且需要它也能响应。也就是说它需要从4个colmn布局到3到1个colmn布局，以宽度为主。
我的代码位于http://jsfiddle.net/AzMz2/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>
答案 0 :(得分：2)
根据您在jsFiddle和span2 / span3类上使用的CSS，您使用的是Bootstrap 2。
除非您想使用自定义CSS，否则此版本的Bootstrap不提供在视口减少时从4到3移动到2到1列的选项。在768px以下的视口处，四列将简单地折叠为一列。
您是否考虑过使用Bootstrap 3？
它已经用.col-sm-X和.col-md-Y这样的新选项取代了旧的.spanX类，它们可以让你按照你的描述进行操作。有关详细信息，请参阅http://getbootstrap.com/css/#grid。
祝你好运！答案 1 :(得分：1)
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<form class="form-horizontal" name="submitDetails" acttion="#">
<fieldset>
<div class="control-group ">
<label class="control-label" for="custom2">2. How did you hear about us?</label>
<div class="controls">
<div class="">
<label class="radio col-xs-12 col-sm-6 col-md-4 col-lg-3">
<input name="custom2" value="1" checked="checked" type="radio">Newspaper</label>
<label class="radio col-xs-12 col-sm-6 col-md-4 col-lg-3">
<input name="custom2" value="2" type="radio">Billboard</label>
<label class="radio col-xs-12 col-sm-6 col-md-4 col-lg-3">
<input name="custom2" value="3" type="radio">Yellow Pages</label>
<label class="radio col-xs-12 col-sm-6 col-md-4 col-lg-3">
<input name="custom2" value="4" type="radio">Radio</label>
<label class="radio col-xs-12 col-sm-6 col-md-4 col-lg-3">
<input name="custom2" value="5" type="radio">Google / Internet</label>
<label class="radio col-xs-12 col-sm-6 col-md-4 col-lg-3">
<input name="custom2" value="23" type="radio">White Pages</label>
<label class="radio col-xs-12 col-sm-6 col-md-4 col-lg-3">
<input name="custom2" value="7" type="radio">Referral</label>
<label class="radio col-xs-12 col-sm-6 col-md-4 col-lg-3">
<input name="custom2" value="8" type="radio">Television</label>
<label class="radio col-xs-12 col-sm-6 col-md-4 col-lg-3">
<input name="custom2" value="9" type="radio">Familiar with area</label>
<label class="radio col-xs-12 col-sm-4 col-md-4 col-lg-3">
<input name="custom2" value="10" type="radio">Magazine</label>
<label class="radio col-xs-12 col-sm-6 col-md-4 col-lg-3">
<input name="custom2" value="21" type="radio">Catalogue</label>
<label class="radio col-xs-12 col-sm-4 col-md-4 col-lg-3">
<input name="custom2" value="25" type="radio">Our website</label>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-sm"></div>
<label class="radio col-xs-12 col-sm-4 col-md-4 col-lg-3">
<input name="custom2" value="24" type="radio">1300 Number</label>
</div>
</div>
</div>
<div class="pull-right">
<button>SUBMIT</button>
</div>
</fieldset>
</form>
</div>
</body>
</html>
感谢。它似乎在测试中工作...代码添加给任何人将来使用