放置小型设备的引导程序行
[英]Position bootstrap rows for small devices
问题描述
我正在尝试为小型设备放置引导程序行，但是我的行遇到了问题。
他们正在触摸屏幕的边缘，看起来确实很丑陋，我尝试用col-ex-off-2来抵消它，但是现在这不仅无济于事，而且弄乱了中型和大型屏幕。
另外，我也可以在行中添加任何边距，这会使文本框看起来非常丑陋，因为它们相互接触。
这是复制此问题的bootply的链接。 请注意，文本框相互接触，看起来很糟。 而且它们并没有像我希望的那样并排。
http://www.bootply.com/Ko7Ky3nj0M
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
html,body {
height:100vh;
max-width: 1500px;
margin: 0 auto;
padding-top: 00px;
}
h1 {
font-size:50px;
}
.checkbox-margin
{
margin-left:30%;
}
.subtitle
{
display:block;
text-align:right;
border-top: 7px solid #ffffff;
color:white;
font-size:40px;
}
.textarea
{
margin-left:15px;
margin-right:15px;
padding-top:5px;
padding-bottom:10px;
}
.content
{
min-height:90vh;
margin-top:5vh;
margin-bottom:5vh;
border-radius:15px;
box-shadow: 1px 1px 20px #000000;
margin-right:15px;
}
.stylebox
{
border-top-right-radius:15px;
border-bottom-left-radius:15px;
background-color:#FFFFFF;
color:#CC3611;
margin-top:5%;
margin-bottom:7%;
}
.full
{
min-height:100vh;
}
.textarea p
{
font-size:20px;
font-weight:bold;
}
.textarea h3
{
font-weight:bold;
}
.divarea
{
margin-left:15px;
margin-right:15px;
padding-top:5px;
padding-bottom:10px;
}
.form-margin
{
margin-bottom:2%;
}
@media screen and (max-width: 992px) {
.container .col-xs-12 {
margin:0px;
padding:0px;
}
.col-xs-12
{
margin-top:50px;
padding-bottom:10px;
padding-left: 10px;
padding-right:10px;
}
.content
{
min-height:100vh;
border-radius:0px;
box-shadow: 0px;
}
h1 {
padding:0px;
}
}
</style>
</head>
<body>
<div class="container full">
<div class="row full">
<div class="col-xs-0 col-md-2">
</div>
<div class="col-xs-12 col-md-8 content">
<div class='divarea'>
<div class='row form-margin'>
<div class='col-xs-8 col-xs-offset-2 col-md-6'>
<input placeholder='Test' type="text" class="form-control" id="usr">
</div>
<div class='col-xs-8 col-xs-offset-2 col-md-6'>
<input placeholder='Test' type="text" class="form-control" id="usr">
</div>
</div>
<div class='row form-margin'>
<div class='col-xs-8 col-xs-offset-2 col-md-6'>
<input placeholder='Test' type="text" class="form-control" id="usr">
</div>
<div class='col-xs-8 col-xs-offset-2 col-md-6'>
<input placeholder='Test' type="text" class="form-control" id="usr">
</div>
</div>
<div class='row form-margin'>
<div class='col-xs-8 col-xs-offset-2 col-md-6'>
<input placeholder='Test' type="text" class="form-control" id="usr">
</div>
<div class='col-xs-8 col-xs-offset-2 col-md-6'>
<input placeholder='Test' type="text" class="form-control" id="usr">
</div>
</div>
</div>
</div>
<div class="col-xs-0 col-md-2"></div>
</div>
</div>
</body>
</html>
1 个解决方案
解决方案1
0 已采纳 2016-08-26 22:29:59
您需要更改使用表单的方式，无需添加自定义CSS，如果将每对元素都包装在“ input-group”类中，则可以应用其他类来很好地分隔信息。 如果您在此处查看Bootsrap输入组文档，则可以获取有关表单元素的一些示例。 您可以通过添加类mb-1（margin-bottom-1rem）的空元素（例如标签）来解决当前问题。 请注意，这是一个修补程序，否则将不建议这样做。
<div class="row form-margin">
<div class="col-xs-8 col-xs-offset-2 col-md-6 ">
<input placeholder="Test" type="text" class="form-control" id="usr">
<label class="m-b-2"></label>
</div>
<div class="col-xs-8 col-xs-offset-2 col-md-6">
<input placeholder="Test" type="text" class="form-control" id="usr">
<label class="m-b-2"></label>
</div>
</div>
将Bootstrap列隐藏到小型设备的行中
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.