调整移动屏幕的引导行
Posted
技术标签:
【中文标题】调整移动屏幕的引导行【英文标题】：Adjusting bootsrap rows for mobile screen 【发布时间】：2016-11-19 08:13:49 【问题描述】：我正在使用引导程序设置页面样式，使用标准引导程序类，如容器、行、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>
<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 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>
在下面的 cmets 之后添加了小屏幕 col-xs 和 col-sm 的引导类
现在看起来像这样
【问题讨论】：
【参考方案1】：只需复制并替换文本区域中的以下类。请参阅下图以了解列类的工作原理。
col-sm-offset-4 col-xs-12 col-sm-5
对于移动视图中的间距问题，您需要使用媒体查询，请参见下面的代码。 您也可以为按钮添加自定义类。
@media (max-width: 768px)
.btn-primary
margin-top: 2rem;
margin-bottom: 2rem;
【讨论】：
嗨@Vishal，你能告诉我我应该在标记中更改什么吗？ 您的文本中有一个名为“col-sm-offset-4 col-xs-5”的类，您需要将它们替换为“col-sm-offset-4 col-xs-” 12 col-sm-5"。 感谢@Vishal，在使用了这些引导类之后，它看起来好多了，但是有一个问题，textarea 和 button 之间没有间距，并且 button 和它下面的消息之间也是如此。我该如何添加，我在这些元素之间添加了一些中断，它会显示在大屏幕上，但在小屏幕上，这些元素之间没有任何中断。请查看编辑后的问题和快照 非常感谢@Vishal，得到了我所有的答案。 Ty @MahtabAlam 如果有帮助，您可以点击右侧确认答案。以上是关于调整移动屏幕的引导行的主要内容，如果未能解决你的问题，请参考以下文章
使用 jquery mobile 调整图像大小以适应移动设备上的屏幕