我有一个使用 Bootstrap 表单生成器创建的表单。此表单当前是响应式的，它使表单元素分布在整个浏览器中，如下所示。
虽然浏览器大小是全屏，但我希望表单看起来像下面这样
上下文中的 View
<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>
在这方面的任何帮助将不胜感激。
最佳答案
只需将所有地方的 col-md-4 更改为 col-md-12，然后阅读 bootstrap 文档。
关于html - Bootstrap 响应式表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39935178/