1. 首頁
  2. 問答
  3. 響應式佈局不起作用？

響應式佈局不起作用？

2013-10-10 60 views
1

我正在使用bootstrap簡單的html代碼，但在移動視圖中，它沒有正常工作。我在代碼中找不到任何問題。響應式佈局不起作用？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<link class="cssdeck" rel="stylesheet" href="css/bootstrap.css"> 
<link rel="stylesheet" href="css/bootstrap-responsive.css" class="cssdeck"> 
<script class="cssdeck" src="css/jquery.min.js"></script> 
<script class="cssdeck" src="js/bootstrap.min.js"></script> 
<title>Doctor Log In</title> 
</head> 
<body> 
<!--<div style="width:100%; background-color:#1d719a; height:100px;"> 
    <img src="nature/logo.png" style="margin:23px 0px 0px 30px;"> 
    <div style="width:30%; float:right; text-align:right; margin-right:20px; margin-top:20px;"> 
    <a href="pdashboard.html" title="Home"><img src="images/home_icon.png" height="32" width="32"/></a> 
    <a href="patientlog.html" title="Logout"><img src="images/logout.png" height="32" width="32" /></a> 
    </div> 
</div> 
--> 
<div class="container" style="background-color: #1d719a; width: 100%;"> 
    <div class="row-fluid"> 
    <div class="span12"> 
    <div class="span6"> 
    <img src="nature/logo.png" style="margin: 23px 0px 20px 30px;"> 
    </div> 
    <div class="span6" style="text-align: right;"> 
    <a href="app.html" title="Home" style="margin-right: 10px;"> 
     <img src="images/home_icon.png" height="32" width="32" style="margin-top: 20px;" /></a> 
    <a href="doclog.html" title="Logout" style="margin-right: 20px;"> 
     <img src="images/logout.png" height="32" width="32" style="margin-top: 20px;" /></a> 
    </div> 
    </div> 
    </div> 
</div> 
<div id="loginModal"> 
    <div class="modal-body" style="max-height: 1400px; margin-top: 70px;"> 
    <div class="well"> 
    <ul class="nav nav-tabs"> 
    <li class="active"><a href="#login" data-toggle="tab">Login</a></li> 
    <li><a href="#create" data-toggle="tab">Create Account</a></li> 
    </ul> 
    <div id="myTabContent" class="tab-content"> 
    <div class="tab-pane active in" id="login"> 
     <form class="form-horizontal" action='dash_board.html' method="POST"> 
     <fieldset> 
     <div id="legend"> 
     <legend class="">Login</legend> 
     </div> 
     <div class="control-group"> 
     <!-- Username --> 
     <label class="control-label" for="username">Username</label> 
     <div class="controls"> 
      <input type="text" id="username" name="username" placeholder="" class="input-xlarge"> 
     </div> 
     </div> 
     <div class="control-group"> 
     <!-- Password--> 
     <label class="control-label" for="password">Password</label> 
     <div class="controls"> 
      <input type="password" id="password" name="password" placeholder="" class="input-xlarge"> 
     </div> 
     </div> 
     <div class="control-group"> 
     <!-- Button --> 
     <div class="controls"> 
      <button class="btn btn-success">Login</button> 
     </div> 
     </div> 
     </fieldset> 
     </form> 
    </div> 
    <div class="tab-pane fade" id="create"> 
     <form id="tab"> 
     <label>Username</label> 
     <input type="text" value="" class="input-xlarge"> 
     <label>First Name</label> 
     <input type="text" value="" class="input-xlarge"> 
     <label>Last Name</label> 
     <input type="text" value="" class="input-xlarge"> 
     <label>Email</label> 
     <input type="text" value="" class="input-xlarge"> 
     <label>Address</label> 
     <textarea value="Smith" rows="3" class="input-xlarge"> 
         </textarea> 
     <div> 
     <button class="btn btn-primary">Create Account</button> 
     </div> 
     </form> 
     <!--<form class="form-horizontal" action='' method="POST"> 
         <fieldset> 
          <div id="legend"> 
           <legend >Personal Details</legend> 
          </div>  
          <div class="control-group"> 
           <label class="control-label"><strong>First Name</strong><span style="color:#F00; font-size:24px">*</span></label> 
           <div class="controls"> 
          <input id="first-name" name="first-name" type="text" > 
         </div> 
         </div> 
          <div class="control-group"> 
           <label class="control-label"><strong>Middle Name</strong></label> 
           <div class="controls"> 
           <input id="middle-name" name="middle-name" type="text" > 
          </div> 
          </div> 
          <div class="control-group"> 
            <label class="control-label"><strong>Last Name</strong><span style="color:#F00; font-size:24px">*</span></label> 
            <div class="controls"> 
            <input id="last-name" name="last-name" type="text"> 
          </div> 
          </div> 
          <div class="control-group"> 
           <label class="control-label"><strong>Username</strong><span style="color:#F00; font-size:24px">*</span></label> 
           <div class="controls"> 
           <input id="username" name="username" type="text"> 
         </div> 
         </div> 
         <div class="control-group"> 
          <label class="control-label"><strong>Password</strong><span style="color:#F00; font-size:24px">*</span></label> 
          <div class="controls"> 
          <input id="password" name="password" type="text"> 
         </div> 
         </div> 
         <div id="legend"> 
           <legend >Professional Details</legend> 
          </div> 
          <div class="control-group"> 
    <label class="control-label"><strong>Specialist</strong><span style="color:#F00; font-size:24px">*</span></label> 
    <div class="controls"> 
    <select id="specialty" name="specialty"> 
    <option value="" selected="selected">(please select a specialty)</option> 
      <option value="AF">Acupuncture</option> 
      <option value="AF">Ayurvedic</option> 
      <option value="AF">Cardiologist(Heart)</option> 
      <option value="AF">Clinical Psychologist</option> 
      <option value="AF">Cosmetic Surgeon</option> 
      <option value="AF">Dentist(Teeth)</option> 
      <option value="AF">Dermatologist(skin)</option> 
      <option value="AF">Diabetologist</option> 
      <option value="AF">ECG</option> 
      <option value="AF">Endocrinologist(Hormones)</option> 
      <option value="AF">ENT(Ear,Nose,Throat)</option> 
      <option value="AF">Gastroenterologist(Digestion)</option> 
      <option value="AF">Gynaecologist</option> 
      <option value="AF">Homeopathic</option> 
      <option value="AF">Infertility Specialist</option> 
      <option value="AF">Neurologist</option> 
      <option value="AF">OPG X-Ray</option> 
      <option value="AF">Ophthalnologist(Eye)</option> 
      <option value="AF">Orthopaedician(Bone)</option> 
      <option value="AF">Paediatrician(child specialist)</option> 
      <option value="AF">Physician</option> 
      <option value="AF">Physiotherapist</option> 
      <option value="AF">Pilates</option> 
      <option value="AF">Plastic Surgeon</option> 
      <option value="AF">Psychotherapist</option> 
      <option value="AF">Pulmonologist(lungs and respiratory)</option> 
      <option value="AF">Sexologist</option> 
      <option value="AF">Surgeon</option> 
      <option value="AF">Urologist(kidney)</option> 
      <option value="AF">Veterinarian(Pets)</option> 
      <option value="AF">X-Ray</option> 
      <option value="AF">Yoga</option> 
    </select> 
    </div> 
    </div> 
         <div class="control-group"> 
    <label class="control-label"><strong>License</strong><span style="color:#F00; font-size:24px">*</span></label> 
    <div class="controls"> 
    <input type="text"> 
    </div> 
    </div> 
          <div class="control-group"> 
    <label class="control-label"><strong>Expertise</strong><span style="color:#F00; font-size:24px">*</span></label> 
    <div class="controls"> 
    <input type="text"> 
    </div> 
    </div> 
    <div id="legend"> 
           <legend >Contact Details</legend> 
          </div> 
    <div class="control-group"> 
    <label class="control-label"><strong>Email</strong><span style="color:#F00; font-size:24px">*</span></label> 
    <div class="controls"> 
    <input id="password" name="password" type="text"> 
    </div> 
    </div> 
    <div class="control-group"> 
    <label class="control-label"><strong>Address Line 1</strong><span style="color:#F00; font-size:24px">*</span></label> 
    <div class="controls"> 
    <textarea rows="3"></textarea> 
    <p class="help-block">Street address, P.O. box, company name, c/o</p> 
    </div> 
    </div> 
    <div class="control-group"> 
    <label class="control-label"><strong>Address Line 2</strong></label> 
    <div class="controls"> 
    <textarea rows="3"></textarea> 
    <p class="help-block">Apartment, suite , unit, building, floor, etc.</p> 
    </div> 
    </div> 
    <div class="control-group"> 
    <label class="control-label"><strong>State</strong></label> 
    <div class="controls"> 
    <input id="region" name="region" type="text"> 
    </div> 
    </div> 
     <div class="control-group"> 
    <label class="control-label"><strong>City</strong></label> 
    <div class="controls"> 
    <select id="country" name="country"> 
    <option value="" selected="selected">(please select a City)</option> 
    <option value="AF">Bangalore</option> 
    <option value="AL">Bhubaneswar</option> 
    <option value="DZ">Kolkata</option> 
    <option value="AS">Delhi</option> 
    </select> 
    </div> 
    </div> 
     <div class="control-group"> 
    <label class="control-label"><strong>Zip/Postal Code</strong></strong><span style="color:#F00; font-size:24px">*</span></label> 
    <div class="controls"> 
    <input id="postal-code" name="postal-code" type="text"> 
    </div> 
    </div> 
          <div class="control-group"> 
           <div class="controls"> 
            <button class="btn btn-success">Submit</button> 
           </div> 
          </div> 
         </fieldset> 
        </form> --> 
    </div> 
    </div> 
    </div> 
    </div> 
    <div class="container" style="background-color: #1d719a; width: 100%; height: 80px; margin-top: 150px;"> 
    <div class="row-fluid"> 
    <div class="span12" style="font: Verdana, Geneva, sans-serif; font-size: 14px; font-weight: bold; color: #FFF;"> 
    <div class="span6"> 
     <table cellpadding="0" cellspacing="0" border="0" style="width: 100%;"> 
     <tr> 
     <td style="height: 10px;" colspan="2">&nbsp;</td> 
     </tr> 
     <tr> 
     <td style="width: 5%">&nbsp;</td> 
     <td>Copyrights 2013. All Rights Reserved.</td> 
     </tr> 
     </table> 
    </div> 
    <div class="span6" style="text-align: right;"> 
     <table cellpadding="0" cellspacing="0" border="0" style="width: 100%;"> 
     <tr> 
     <td style="height: 20px;" colspan="2">&nbsp;</td> 
     </tr> 
     <tr> 
     <td style="width: 5%">&nbsp;</td> 
     <td>G3 Soft Tech Pvt. Ltd.</td> 
     <td style="width: 5%">&nbsp;</td> 
     </tr> 
     </table> 
    </div> 
    </div> 
    </div> 
    </div> 
</body> 
</html>

對於響應視圖我使用引導-responsive.css和路徑是正確的。任何解決方案都會很棒。

來源

2013-10-10 user2775200

+0

你能本地化您的代碼中的問題？同時請詳細解釋「移動視圖不適當」的含義。 – Pavlo

+0

我的意思是它在mozila瀏覽器中顯示的方式，當我點擊移動視圖及其在手機瀏覽器中的不同時。在手機瀏覽器網站正常但不是以我想要的方式。 – user2775200

回答

0

你應該從引導來將你的JavaScript核心文件在頁面右側底部的結束標記之前:-)這樣的：

<!-- core JavaScript --> 
<script src="js/jquery.js"></script> 
    <script src="js/bootstrap.min.js"></script>

我也想知道爲什麼你有這樣的： class =「cssdeck」src =「css/jquery.min.js」放置在CSS文件夾中的JavaScript文件？該路徑可能與它有關...

class =「cssdeck」src =「js/bootstrap.min.js」 不確定爲什麼要爲您的腳本定義類：這是正確的：

腳本類型= 「文/ JavaScript的」 SRC = 「JS/bootstrap.min.js」

來源

2013-10-10 16:29:04 WebDev67

相關問題

 相關問題