調整手機屏幕的靴帶行

我使用引導程序來使用標準引導程序類（如容器，行，col-sm-offset-n（獲得適當的間距））設置頁面的樣式。但是一些組件在手機屏幕上看起來很糟糕。調整手機屏幕的靴帶行

我有以下我的網頁

container 
|------row 
     |-----bootstrap panel 
|------row 
     |-----div which holds error messages 
|------row 
     |-----a form having a textarea and a button 
|------row 
     |-----span tag

該網站的大屏幕上良好的引導組件，但較小的屏幕上的表單中的textarea的獲取到手機屏幕的最左邊。我希望它在中間顯示。同樣，最後的跨度標籤也會附加到移動屏幕的最左側。我希望它在中間顯示。

下面是大小屏幕上分別顯示的樣子。

大屏幕

較小的屏幕

你可以看到這裏的問題screen size

下面是我用

標記10

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="utf-8" /> 
    <link rel="icon" href="/images/favicon.png" type="image/x-icon"> 
    <title>Say your heart out ...</title> 
    <!--<meta name='viewport' content='user-scalable=no'>--> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 

    <link rel="stylesheet" href="/libs/css/bootstrap.min.css"/> 
    <link rel="stylesheet" href="/libs/css/custom.css"/> 
    <link rel="stylesheet" href="/libs/css/toaster.min.css"/>  

    <script src="/libs/js/jquery.min.js" type="text/javascript"></script> 
    <script src="/libs/js/jquery.bootstrap.newsbox.min.js" type="text/javascript"></script> 
    <script src="/libs/js/angular.min.js" type="text/javascript"></script> 
    <script src="/libs/js/main.js" type="text/javascript"></script>  
    <script src="/libs/js/spin.min.js" type="text/javascript"></script> 
    <script src="/libs/js/angular-spinner.min.js" type="text/javascript"></script>  
</head> 

<body ng-app="mean" ng-controller="MainCtrl"> 


    <toaster-container></toaster-container> 
    <br/> 
    <div class="container"> 
     <div class="row"> 
     <div class="col-sm-offset-3 col-md-7"> 

      <div class="panel panel-default"> 
      <div class="panel-heading"> 
       <span class="glyphicon glyphicon-envelope"></span> 
       <span><b>So what you wanna do before you die ...</b></span> 
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
       <span><a href="/"><span class="glyphicon glyphicon-refresh"></span>Load messages</a></span> 
      </div> 
      <div class="panel-body" > 
       <div ng-cloak class="row"> 
        <div class="spinner" ng-show="formModel.loadingData"> 
         <span us-spinner></span> 
         <br/><br/><br/><br/><br/> 
         <p style="text-align:center">Loading Awesomeness ... </p>  
       </div> 

       <div class="col-xs-12">     
        <ul class="demo1"> 

        <li class="news-item" ng-repeat="item in records" on-last-element> 
        <table> 
        <tr> 
        <td> 
         <img height="60" ng-src="/images/{{($index+11) % 10}}.png" class="img-circle" />      </td> 
         <td style="">{{item.message}} <span class="text-primary">@{{item.username}}</span></td> 
         </tr> 
          </table> 
         </li> 

        </ul>      
       </div> 
       </div> 
      </div>    
      <div class="panel-footer"></div>    
      </div> 
     </div>   
    </div> 


     <div class="row"> 
      <div class="col-sm-offset-3 col-sm-7 col-xs-12"> 
       <p style="text-align:center" ng-cloak class="alert alert-danger" 
       ng-show="formModel.messageEmpty"> 
       Oh gosh ! Really you don't wanna do anything before you are gone !!! ohh... come on 
       </p> 

       <p style="text-align:center" ng-cloak class="alert alert-danger" 
       ng-show="formModel.messageTooLong"> 
       You are trying to do too many things buddy, just 150 characters !!! 
       </p> 

      <p style="text-align:center" ng-cloak class="alert alert-danger" 
       ng-show="formModel.usernameEmpty"> 
       Looks like you forgot to mention your name !!!</p> 

       <p style="text-align:center" ng-cloak class="alert alert-danger" 
       ng-show="formModel.usernameTooLong"> 
       Sorry we can't handle such a long name, please type a short name !!!</p> 

      </div> 
     </div> 

     <div class="row"> 

      <form name="messageForm" 
       novalidate="novalidate" ng-submit="onSubmit()" id="message-box"> 

       <div class="form-group" > 
        <textarea class="col-sm-offset-4 col-sm-5 col-xs-12 " required 
          ng-model="formModel.message" 
         style="border:double 4px #2B689D;border-radius: 0.5em;" 
         rows="3" id="message" 
         placeholder="Choose your life's best 150 characters followed by @ and your name, then shoot it.."></textarea> 
        <br/> 
        <button style="margin-left: 5px" class="col-sm-1 col-xs-12 btn btn-primary" type="submit">Shoot it</button> 
        <br/> 
       </div> 
       <br/><br/> 
       <p class="col-sm-offset-3 col-xs-12 col-sm-7 alert alert-success" 
       style="text-align:center"> 
       e.g. Will love to go to antarctica for adventure, feels kinda [email protected] 
       </p> 
       <br/> 
     </form> 

    </div> 


     <div class="row"> 
     <div class="col-sm-12 col-xs-12"> 
      <span style="font-weight:bold;"> 
      Made with the help of <span style="text-decoration:line-through">5 </span>15 cups of coffee by 
      </span>    
      <a style="color:white" href="https://twitter.com/alammahtab08" target="_blank">@alammahtab08</a> 
     </div><br/> 
     </div> 

</div> 

<script src="/libs/js/angular-animate.min.js"></script> 
<script src="/libs/js/toaster.min.js"></script> 
</body> 

</html>

後下方添加自舉類註釋爲小屏幕COL-XS和Col-SM

現在看來，這個

來源

2016-07-16 Mahtab Alam

只需複製並在您的textarea的替代下方類。請參考下圖以瞭解列類的工作原理。

col-sm-offset-4 col-xs-12 col-sm-5

對於移動視圖，您需要使用媒體查詢，請參見下面的代碼間距問題。 您也可以爲您的按鈕添加自定義類。

@media (max-width: 768px){ 

    .btn-primary{ 
     margin-top: 2rem; 
     margin-bottom: 2rem; 
    } 
}

來源

2016-07-16 04:12:12

嗨@Vishal你能告訴我，我應該在標記改變。 –

在您的文本中有一個名爲「col-sm-offset-4 col-xs-5」的類，您需要將它們替換爲「col-sm-offset-4 col-xs-12 col-sm-5」。 –

感謝@Vishal，使用這些引導類後，它看起來好多了，但有一個問題，textarea和button之間沒有間距，按鈕和它下面的消息之間也沒有間隔。我怎麼補充一點，我在這些元素之間添加了一些中斷，並在大屏幕上顯示，但在小屏幕上這些元素之間沒有任何中斷。請參閱編輯的問題和快照 –

調整手機屏幕的靴帶行

回答

相關問題