Html 调整移动屏幕的bootsrap行
我使用bootstrap来设置页面样式，使用标准的bootstrap类，如container、row、col-sm-offset-n（以获得适当的间距）。但有些组件在手机屏幕上看起来很糟糕 我的页面上有以下引导组件Html 调整移动屏幕的bootsrap行,html,css,twitter-bootstrap-3,media-queries,Html,Css,Twitter Bootstrap 3,Media Queries,我使用bootstrap来设置页面样式，使用标准的bootstrap类，如container、row、col-sm-offset-n（以获得适当的间距）。但有些组件在手机屏幕上看起来很糟糕 我的页面上有以下引导组件 container |------row |-----bootstrap panel |------row |-----div which holds error messages |------row |-----a form hav
container
|------row
|-----bootstrap panel
|------row
|-----div which holds error messages
|------row
|-----a form having a textarea and a button
|------row
|-----span tag
<!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 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>
把你的心说出来。。。
所以你死前想做什么。。。
加载令人惊叹的
最后一个元素上的-
{{item.message}}@{{item.username}
哦，天哪！你真的不想在你离开之前做任何事！！！哦。。。来吧
你想做的事情太多了，伙计，只有150个字符！！！
看来你忘了提你的名字了
很抱歉，我们无法处理这么长的名称，请键入一个短名称
开枪
e、 g.会喜欢去南极洲探险，感觉有点penguin@amy
在5杯15杯咖啡的帮助下，由
只需在文本区域复制并替换下面的类即可。请参阅下图以了解column类的工作原理
对于移动视图中的间距问题，您需要使用媒体查询，请参阅下面的代码。 您还可以为button添加自定义类
您好@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如果有此帮助，请单击右键确认答案。
col-sm-offset-4 col-xs-12 col-sm-5
@media (max-width: 768px){
.btn-primary{
margin-top: 2rem;
margin-bottom: 2rem;
}
}