2
小さなデバイス用のブートストラップ行を配置しようとしていますが、私の行に問題があります。小さなデバイス用のブートストラップ行の位置
彼らは画面の端に触れており、実際には醜いように見えますが、私は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>
ます。http：// WWW .bootply.com/z4X448RA0W。あなたの例をBootplyにコピーしても問題は説明されません。正確に何が問題なのかを示すBootplyを提供できますか？あなたのコードの編集版：http://www.bootply.com/PFup801j7z。 –
小さなデバイスに触れるテキストボックスが欲しいとは思わないが、私が実行した最大の問題であり、その問題を解決する方法を見つけようとしている。 –
私は知っている、あなたはそれを説明する上質の仕事をしたが、私は**再現しようとする私の試みを見ることができない**。 –