1

我正在尝试使用引导程序构建一个表单，并且也需要它具有响应性。那就是它需要从 4 列布局到 3 到 1 列布局加深宽度。

我的代码位于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>
4

2 回答 2

2

根据您在 jsFiddle 和 span2 / span3 类上使用的 css，您正在使用Bootstrap 2。

除非您想使用自定义 CSS，否则此版本的 Bootstrap 不提供随着视口减小而从 4 列移动到 3 列再到 2 列到 1 列的选项。在低于 768 像素的视口中，四列将简单地折叠为一列。

您是否考虑过使用Bootstrap 3？

它已经用 .col-sm-X 和 .col-md-Y 等新选项替换了旧的 .spanX 类，这将使您可以按照您的描述进行操作。有关详细信息，请参阅http://getbootstrap.com/css/#grid。

祝你好运！

于 2013-08-24T00:45:08.787 回答
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>

谢谢。它似乎在测试中有效......添加了代码供任何人将来使用

于 2013-08-24T01:55:51.080 回答