好吧,我在表单对齐方面遇到了一些问题。我在 2 个不同的文件上尝试了它,一个给出了正确的对齐方式,另一个没有(这是 codeigniter 的 View )。请帮忙。提前致谢:)
CI View 下的文件及其截图如下
<?php $tab = (isset($_GET['tab'])) ? $_GET['tab'] : 'add-user'; ?>
<div class="container">
<div class="row" style="margin-top:50px;">
<div class="col-lg-8 col-lg-offset-3">
<ul style="margin-bottom: 30px;" class="nav nav-pills">
<li class="<?php echo ($tab == 'add-user') ? 'active' : ''; ?>"><a href="<?php echo site_url('/home/add_user?tab=add-user'); ?>"><i class="fa fa-user"></i> <span>Add User</span></a></li>
<li class="<?php echo ($tab == 'update-user') ? 'active' : ''; ?>"><a href="<?php echo site_url('/home/add_user?tab=update-user'); ?>">Update User</a></li>
<li class="<?php echo ($tab == 'delete-user') ? 'active' : ''; ?>"><a href="<?php echo site_url('/home/add_user?tab=update-user'); ?>">Delete User</a></li>
<li class="<?php echo ($tab == 'view-user') ? 'active' : ''; ?>"><a href="<?php echo site_url('/home/add_user?tab=update-user'); ?>">View Users</a></li>
<li class="<?php echo ($tab == 'generate-account') ? 'active' : ''; ?>"><a href="<?php echo site_url('/home/add_user?tab=generate-account'); ?>">Generate User Account</a></li>
</ul>
<div class="tab-content">
<div id="add-user" class="tab-pane <?php echo ($tab == 'add-user') ? 'active fade in' : ''; ?>">
<?php $this->load->library('form_validation');
echo validation_errors(); ?>
<?php echo form_open('crud_user/add_form');?>
<fieldset>
<legend>ADD</legend>
<form class="form-horizontal" ame="add_user_form" form="add_form">
<fieldset>
<legend>Add User</legend>
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Employee ID</label>
<div class="col-md-4">
<input type="text" name="emp_id" id="emp_id" placeholder="Employee ID" class="form-control input-md">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">First Name</label>
<div class="col-md-4">
<input type="text" name="firstname" id="firstname" placeholder="First Name" class="form-control input-md">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="selectbasic">Select Basic</label>
<div class="col-md-4">
<select id="selectbasic" name="selectbasic" class="form-control">
<option value="1">Option one</option>
<option value="2">Option two</option>
</select>
</div>
</div>
</fieldset>
</form>
</div>
</div>
<div class="tab-content">
<div id="update-user" class="tab-pane <?php echo ($tab == 'update-user') ? 'active fade in' : ''; ?>">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis maximus ex.</p>
</div>
</div>
<div class="tab-content">
<div id="generate-account" class="tab-pane <?php echo ($tab == 'generate-account') ? 'active fade in' : ''; ?>">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis maximus ex.</p>
</div>
</div>
</div>
</div>
</div>
测试文件的片段及其屏幕截图如下
<div class="container">
<div class="row" style="margin-top:50px;">
<div class="col-lg-8 col-lg-offset-3">
<ul style="margin-bottom: 30px;" class="nav nav-pills">
<li class="active"><a href="#add-user"><i class="fa fa-user"> </i> <span>Add User</span></a></li>
</ul>
<div class="tab-content">
<div id="add-user" class="tab-pane active fade in">
<form class="form-horizontal">
<fieldset>
<legend>Add User</legend>
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Employee ID</label>
<div class="col-md-4">
<input type="text" name="emp_id" id="emp_id" placeholder="Employee ID" class="form-control input-md">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">First Name</label>
<div class="col-md-4">
<input type="text" name="firstname" id="firstname" placeholder="First Name" class="form-control input-md">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="selectbasic">Select Basic</label>
<div class="col-md-4">
<select id="selectbasic" name="selectbasic" class="form-control">
<option value="1">Option one</option>
<option value="2">Option two</option>
</select>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
最佳答案
尝试将类“行”添加到每个 <div class="form-group">
. IIRC 来自 bootstrap,col 类在行容器中工作得更好。
关于php - Bootstrap 表单对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37371108/