Я использую 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
Сайт выглядит хорошо на большом экране, но на меньшем экране текстовое поле в виде попадает в крайнюю левую сторону экрана мобильного. Я хочу, чтобы это было показано посередине. Аналогично последний тег диапазона привязывается к самой левой стороне экрана мобильного устройства. Я хочу, чтобы это было показано посередине.
Вот что выглядит на больших и маленьких экранах соответственно.
большие экраны
Меньшие экраны
Вы можете увидеть проблему здесь 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 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 и кол-см
Теперь он выглядит, как это
Привет @Vishal вы можете сказать мне, что я должен изменить в разметке. –
В вашем текстовом поле есть класс «col-sm-offset-4 col-xs-5», вам нужно заменить их «col-sm-offset-4 col-xs-12 col-sm-5», , –
Спасибо @Vishal, после использования этих классов начальной загрузки это выглядит намного лучше, одна проблема, однако, между текстовой областью и кнопкой не существует промежутка между кнопкой и сообщением под ним. Как я могу добавить это, я добавил некоторый разрыв между этими элементами, и он отображается на большом экране, но на маленьком экране эти элементы не имеют перерывов между ними. См. Отредактированный вопрос и снимок –