Question

我正在使用bootstrap来设置页面样式，使用标准的bootstrap类，如container，row，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

网站在大屏幕上看起来不错，但在较小的屏幕上，表单内的文本区域会移动到移动屏幕的最左侧。我想让它显示在中间。类似地，最后一个span标记附加到移动屏幕的最左侧。我想让它显示在中间。

分别在越来越大的屏幕上看起来就是这样。

更大的屏幕

较小的屏幕

您可以在此处查看问题screen size

以下是我使用的标记

    <!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 penguin@amy 
              </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添加了bootstrap类

现在它看起来像这个

Answer 1

只需在textarea中复制并替换下面的类。请参阅下图，了解列类的工作原理。

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

对于移动视图中的间距问题，您需要使用媒体查询，请参阅下面的代码。 您也可以为按钮添加自定义类。

@media (max-width: 768px){ 

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

调整移动屏幕的bootsrap行

1 个答案: