使Bootstrap 3更加移动友好的问题
使Bootstrap 3更加移动友好的问题
提问于 2015-08-08 08:57:29
我正在创建一个个人网站，使用Twitter引导3.4.3作为前端，Python/Django 1.5.4作为后端。我目前有很多问题，试图使网站进入一个更移动友好的模式。我正在为我的网站使用封面和博客模板。封面模板是问题的模板。
这是笔记本电脑上我网站主页的一个片段-
我的智能手机上是这样的-
我的笔记本电脑上的联系人页面是这样的-
我的智能手机上是这样的-
正如您在移动版本中所看到的，背景并不是围绕所有元素和图片以及文本框的正确位置。
我使用标准的cover.css文件作为主页和联系人页面的所有样式。以下是我为主体使用的一些示例代码-
html,
body {
height: 100%;
width: 100%;
background: url("../background-2.jpg") center no-repeat;
background-size:cover;
}我如何改变造型，使我的网站移动友好？
回答 1
Stack Overflow用户
发布于 2015-08-08 11:10:18
您应用到表单的类在任何定制的CSS：.form-control之前都很重要。引导3种形式
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<form id="email_form" method="POST" action="/home/contact/">
<div class="row">
<input type='hidden' name='csrfmiddlewaretoken' value='uusHSjnOjeCLfyaCwmUC3eKH3EXIH9iX' />
<div class="col-md-6">
<div class="form-group">
<input id="id_name" maxlength="200" name="name" placeholder="Name" type="text" class="form-control" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input id="id_email" name="email" placeholder="E-mail" type="text" class="form-control" />
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<input id="id_subject" maxlength="100" name="subject" placeholder="Subject" type="text" class="form-control" />
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<textarea cols="40" id="id_message" name="message" placeholder="Message" rows="10" class="form-control"></textarea>
</div>
</div>
</div>
<button class="btn btn-primary" type="submit" name="send">Send</button>
</form>
</div>
您有两个不同的样式表，它们实际上是相同的，然后是这些规则(您实际上只需要这两者之间的一个文件)：
cover.css有这个规则，mobile.css缺少高度和宽度，这可能会导致背景问题。
html, body {
height: 100%;
width: 100%;
background: url("http://www.raghavkumar.work/static/background-2.jpg") center no-repeat;
background-size:cover;
}mobile.css有cover.css没有的规则。
.img-responsive {
display: block;
height: auto;
max-width: 100%;
}另外，两者都有这样的错误:底部拼写错误。padding-bottom
.helptext {
padding-bottm: 2px;
font-size: 15px;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31891429
复制相关文章
相似问题
腾讯云开发者
