Bootstrap 响应式表单答案

【问题标题】：Bootstrap Responsive FormsBootstrap 响应式表单
【发布时间】：2016-10-08 17:19:39
【问题描述】：

我有一个使用 Bootstrap 表单生成器创建的表单。此表单当前是响应式的，这使得表单元素在整个浏览器中展开，如下所示。

尽管浏览器大小为全屏，但我希望表单看起来如下所示

上下文中的视图

<head>
        <title>Registration Form</title>
        <script src="http://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    </head>
    <body>
        <?php
        echo "<div class='error_msg'>";
        echo validation_errors();
        echo "</div>";
        echo form_open('userAuthenticationController/new_user_registration');
        ?>

        <form class="form-horizontal">
        <fieldset>

        <!-- Form Name -->
        <legend>Registration Form</legend>
            <!-- Text input-->
            <div class="form-group">
              <label class="col-md-4 control-label" for="name">Name</label>
              <div class="col-md-4">
              <input id="name" name="name" type="text" placeholder="Enter your Full Name" class="form-control input-md" required="">
              </div>
            </div>

            <!-- Text input-->
            <div class="form-group">
              <label class="col-md-4 control-label" for="phoneNumber">Contact Number</label>
              <div class="col-md-4">
              <input id="phoneNumber" name="phoneNumber" type="text" placeholder="Enter your Contact Number" class="form-control input-md" required="">
              <span class="help-block">In the format of (0*********) E.g. 0771524376</span>
              </div>
            </div>

            <!-- Text input-->
            <div class="form-group">
              <label class="col-md-4 control-label" for="username">Username</label>
              <div class="col-md-4">
              <input id="username" name="username" type="text" placeholder="Enter a username " class="form-control input-md" required="">
              <span class="help-block">Should contain at least 6 characters</span>
              </div>
            </div>

            <!-- Password input-->
            <div class="form-group">
              <label class="col-md-4 control-label" for="password">Password</label>
              <div class="col-md-4">
                <input id="password" name="password" type="password" placeholder="Enter a Password" class="form-control input-md" required="">
                <span class="help-block">Minimum 5 characters</span>
              </div>
            </div>

            <!-- Select Basic -->
            <div class="form-group">
              <label class="col-md-4 control-label" for="userType">User Type</label>
              <div class="col-md-4">
                <select id="userType" name="userType" class="form-control">
                  <option value="Student">Student</option>
                  <option value="Industry Rep">Industry Rep</option>
                  <option value="Academic Staff">Academic Staff</option>
                </select>
              </div>
            </div>

            <!-- Text input-->
            <div class="form-group">
              <label class="col-md-4 control-label" for="identification">Identification</label>
              <div class="col-md-4">
              <input id="identification" name="identification" type="text" placeholder="Enter an identification" class="form-control input-md" required="">
              <span class="help-block">Sliit ID Number(If Student)/ Sliit email( If Academic Staff Memeber)<br> Leave this field blank if you're neither</span>
              </div>
            </div>

            <!-- Button (Double) -->
            <div class="form-group">
              <label class="col-md-4 control-label" for="submit"></label>
              <div class="col-md-8">
                <button id="submit" name="submit" class="btn btn-info" type="submit">Register</button>
                <button id="login" name="login" class="btn btn-info" type="button" onclick="<?php echo base_url() ?>index.php/userAuthenticationController/index">Login</button>
              </div>
            </div>
        </table>
        </fieldset>
        </form>
        <?php
        echo form_close();
        ?>

    </body>

我们将非常感谢您在这方面的任何帮助。

【问题讨论】：

在这个 jsfiddle 中工作正常。 jsfiddle.net/ynjkrd3j

标签： html css forms twitter-bootstrap responsive

【解决方案1】：

只需将 col-md-4 更改为 col-md-12，并阅读引导文档。

【讨论】：

【解决方案2】：

你的方法有错误，这里是正确的方法：

<div class="col-md-4">
  <div class="form-group">
    <label class="control-label" for="name">Name</label>
    <input id="name" name="name" type="text" placeholder="Enter your Full Name" class="form-control input-md" required="">
   </div>
</div>

您可以使用 col-md-12 或 col-md-6（随便），但为了获得更好的视图和用户体验，col-md-4 或 -3 效果更好。使用上述方法可以正确查看所有内容。

【讨论】：