1

ブートストラップの単純な 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>

レスポンシブ ビューでは、bootstrap-responsive.cssを使用していますが、パスは正しいです。どんな解決策も素晴らしいでしょう。

4

2 に答える 2

0

Bootstrap の JavaScript コア ファイルは、ページの下部の終了タグの直前に配置する必要があります :-) このように:

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

class="cssdeck" src="css/jquery.min.js" JavaScript ファイルが CSS フォルダーに配置されているのはなぜですか? その道には何か関係があるのか​​もしれません...

class="cssdeck" src="js/bootstrap.min.js" スクリプトのクラスを定義している理由がわからない: 以下は正しいです:

script type="text/javascript" src="js/bootstrap.min.js"

于 2013-10-10T16:29:04.407 に答える
0

これを HTML の HEAD セクションに追加します --

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

説明：

これにより、小さいデバイスのブラウザーにページのスケーリング方法が伝えられます。詳細については、https ://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html をご覧ください。

于 2013-10-10T14:58:47.977 に答える