问题
I have a form inside a modal and this is what it looks like:
My code is:
<div class="modal fade" id="addContactModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Add Contact</h4>
</div>
<form action="addcontact.php" method="POST">
<div class="modal-body">
<div class="form-group">
<label for="contactfname">First Name</label>
<input type="text" class="form-control" id="contactfname" name="txt_fn" required>
</div>
<div class="form-group">
<label for="contactmname">Middle Name</label>
<input type="text" class="form-control" id="contactmname" name="txt_mn" required>
</div>
<div class="form-group">
<label for="contactlname">Last Name</label>
<input type="text" class="form-control" id="contactlname" name="txt_ln" required>
</div>
<div class="form-group">
<label for="contactea">Email Address</label>
<input type="email" class="form-control" id="contactea" name="txt_ea" required>
</div>
<div class="form-group">
<label for="contactnum">Mobile Number</label>
<input type="text" class="form-control" id="contactnum" name="txt_num" required>
</div>
<div class="form-group">
<label for="contactgroup">Select Group</label>
<select name="txt_group" class="form-control" id="contactgroup" required>
<option value="">Choose group...</option>
<?php
require 'conn.php';
try {
$data = $conn->query("SELECT * FROM tbl_groups");
foreach($data as $row) {
?>
<option value="<?php echo $row['id']; ?>"><?php echo $row['groupname']; ?></option>
<?php
} } catch (PDOException $e) {
echo 'ERROR: ' . $e->getMessage();
}
?>
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input type="submit" name="addgroupbtn" class="btn btn-primary" value="Save Contact">
</div>
</form>
</div>
</div>
</div>
However when the screen is small, it doesn't fit and it looks messy. And what I wanted to do is like this:
Is this possible inside a modal? Any help would be much appreciated.
回答1:
Ya it is possible inside in a modal. You can simply do it with a Grid system. Here is the working code.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#addContactModal">
Launch demo modal
</button>
<div class="modal fade" id="addContactModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Add Contact</h4>
</div>
<form action="addcontact.php" method="POST">
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="form-group">
<label for="contactfname">First Name</label>
<input type="text" class="form-control" id="contactfname" name="txt_fn" required>
</div>
<div class="form-group">
<label for="contactmname">Middle Name</label>
<input type="text" class="form-control" id="contactmname" name="txt_mn" required>
</div>
<div class="form-group">
<label for="contactlname">Last Name</label>
<input type="text" class="form-control" id="contactlname" name="txt_ln" required>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="form-group">
<label for="contactea">Email Address</label>
<input type="email" class="form-control" id="contactea" name="txt_ea" required>
</div>
<div class="form-group">
<label for="contactnum">Mobile Number</label>
<input type="text" class="form-control" id="contactnum" name="txt_num" required>
</div>
<div class="form-group">
<label for="contactgroup">Select Group</label>
<select name="txt_group" class="form-control" id="contactgroup" required>
<option value="">Choose group...</option>
<?php
require 'conn.php';
try {
$data = $conn->query("SELECT * FROM tbl_groups");
foreach($data as $row) {
?>
<option value="<?php echo $row['id']; ?>"><?php echo $row['groupname']; ?></option>
<?php
} } catch (PDOException $e) {
echo 'ERROR: ' . $e->getMessage();
}
?>
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input type="submit" name="addgroupbtn" class="btn btn-primary" value="Save Contact">
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
来源：https://stackoverflow.com/questions/32960737/implementing-grid-system-in-bootstrap-modal-form