调整手机屏幕的靴带行

我使用引导程序来使用标准引导程序类（如容器，行，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之间没有间距，按钮和它下面的消息之间也没有间隔。我怎么补充一点，我在这些元素之间添加了一些中断，并在大屏幕上显示，但在小屏幕上这些元素之间没有任何中断。请参阅编辑的问题和快照 –

调整手机屏幕的靴带行

回答

相关问题