實現網格系統的引導模式窗體

我有一個表格一個模式裏面，這是什麼樣子：實現網格系統的引導模式窗體

我的代碼是：

<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">&times;</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>

然而，當屏幕小，它不適合，看起來很亂。而我想做的事情是這樣的：

這是可能的一個模式裏面？任何幫助將非常感激。

來源

2015-10-06 FewFlyBy

雅這是可能的模式內。您可以簡單地通過網格系統來完成。這是工作代碼。

<!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">&times;</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>

來源

2015-10-06 04:43:31

實現網格系統的引導模式窗體

回答

相關問題