我有下面的代码,我遇到的问题是,我注意到无论我做什么,我似乎都无法减少额外真实状态的右侧,因为右侧在步骤1和步骤2中似乎有很多额外的空间。
我试着让它在台式机、平板电脑和移动设备上保持平衡。
有人能教我怎么修吗。
这是我的FIDDLE
下方的我的代码
HTML
<div class="container claim-c">
<div class="row claimBordercolor">
<div class="col-xs-4 col-sm-2 col-md-3 claim-divider">
<h2 class="steps "> <span class="steppos">STEP</span> <span class='circle pull-right'>1</span></h2>
</div>
<div class="col-xs-8 col-sm10 col-md-9">
<h4 class="claim-hdr" style="color:#fff">CURRENT </h4>
<div class="row">
<div class="col-xs-9 col-sm-4 col-md-4 ">
<label class="control-label required" for="name">SOME SOME Number <i class="fa fa-asterisk" aria-hidden="true"></i></label>
<input class="form-control" id="name" name="name" type="text" placeholder="Enter name" />
</div>
<div class="col-xs-9 col-sm-2 col-md-2">
<h2><span class="label label-warning orPos">OR</span></h2>
</div>
<div class="col-xs-9 col-sm-4 col-md-4">
<label class="control-label " for="name"> Some/test s Lotus Number</label>
<input class="form-control" id="name" name="name" type="text" placeholder="Enter name" />
</div>
</div>
</div>
</div>
<!-- end of row -->
<div class="row claimBordercolor">
<div class="col-xs-4 col-sm-2 col-md-3 claim-divider2">
<h2 class="steps "> <span class="steppos">STEP</span> <span class='circle pull-right'>2</span></h2>
</div>
<div class="col-xs-8 col-sm-10 col-md-9">
<h4 class="claim-hdr" style="color:#fff"> LoremIpsumorem Ipsum Lorem ipsum lorem ipsum Lorem ipsumLoremipsum lorem ipsum.</h4>
<div class="row">
<div class="col-xs-8 col-sm-4 col-md-4">
<label class="control-label " for="name">Date of Birth(MM/DD/YYYY)</label>
<input class="form-control" id="name" name="name" type="text" placeholder="Enter name" />
<label class="control-label " for="name"> Type</label>
<input class="form-control" id="name" name="name" type="text" placeholder="Enter name" />
</div>
<div class="col-xs-8 col-sm-2 col-md-1">
<h2><span class="label label-warning orPos">OR</span></h2>
</div>
<div class="col-xs-8 col-sm-4 col-md-4">
<label class="control-label " for="name"> Name</label>
<input class="form-control" id="name" name="name" type="text" placeholder="Enter name" />
<label class="control-label " for="name">ZIP </label>
<input class="form-control" id="name" name="name" type="text" placeholder="Enter name" />
</div>
</div>
</div>
</div>
<!-- end of row -->
</div>
CSS
.circle {
position: relative;
height: 50px;
width: 50px;
text-align: center;
line-height: 47px;
color: #000;
border-radius: 50%;
border: 2px solid #fff;
z-index: 999999;
}
.circle:after {
position: absolute;
content: '';
top: 4px;
left: 4px;
height: calc(100% - 8px);
width: calc(100% - 8px);
border-radius: inherit;
background: #fff;
z-index: -1;
}
.circle.white:after {
top: 0px;
left: 0px;
border: 4px solid #000
}
.circle.image:after {
background: url(http://lorempixel.com/200/200/abstract/4);
}
.claim-c {
border: 2px solid #ccc;
background-color: #30A759;
margin-top: 20px;
font-family: Arial, Helvetica, sans-serif;
}
.claim-c label {
color: #fff !important;
text-transform: uppercase;
padding-top: 15px;
}
.claim-divider {
border-right: 14px solid #fff;
height: 190px;
margin-top: 9px;
margin-bottom: 9px;
}
.claim-divider2 {
border-right: 14px solid #fff;
height: 232px;
margin-top: 9px;
margin-bottom: 9px;
}
.claimBordercolor {
/* border:10px solid #FFCB00; */
border: 10px solid rgba(12, 64, 28, 0.91);
}
.claim-hdr {
width: 81%;
color: #fff;
text-transform: uppercase;
}
.margin-right20 {
margin-right: 20px;
}
.steppos {
color: #fff;
position: relative;
top: 7px;
font-weight: bold;
}
.orPos {
padding-right: 10px;
}
@media only screen and (max-width: 490px) {
body {
background-color: red;
}
.claim-divider {
border-right: 14px solid #fff;
height: 330px;
margin-top: 9px;
margin-bottom: 9px;
}
.claim-divider2 {
border-right: 14px solid #fff;
height: 582px;
margin-top: 9px;
margin-bottom: 9px;
}
.steppos {
color: #fff;
position: relative;
top: -8px;
font-weight: bold;
}
@media only screen and ( min-width:750px) {
body {
background-color: blue;
}
.claim-divider {
border-right: 14px solid #fff;
height: 330px;
margin-top: 9px;
margin-bottom: 9px;
}
.claim-divider2 {
border-right: 14px solid #fff;
height: 582px;
margin-top: 9px;
margin-bottom: 9px;
}
.steppos {
color: #fff;
position: relative;
top: -8px;
font-weight: bold;
}
几件事:
- 你有一个打字错误
.col-sm10
,应该是,.col-sm-10
- 在你的一行中,你总共有10列。当bootstrap中的最大值为12时
.col-sm-4
+.col-sm-2
+.col-sm-4
(合计=10)
你可以有:
.col-sm-5
+.col-sm-2
+.col-sm-5
(总计=12)
同样的事情也适用于md
类
- 关于
xs
类当你有.col-xs-9
时,你应该有.col-xs-12
代码段
.circle {
position: relative;
height: 50px;
width: 50px;
text-align: center;
line-height: 47px;
color: #000;
border-radius: 50%;
border: 2px solid #fff;
z-index: 999999;
}
.circle:after {
position: absolute;
content: '';
top: 4px;
left: 4px;
height: calc(100% - 8px);
width: calc(100% - 8px);
border-radius: inherit;
background: #fff;
z-index: -1;
}
.circle.white:after {
top: 0px;
left: 0px;
border: 4px solid #000
}
.circle.image:after {
background: url(http://lorempixel.com/200/200/abstract/4);
}
.claim-c {
border: 2px solid #ccc;
background-color: #30A759;
margin-top: 20px;
font-family: Arial, Helvetica, sans-serif;
}
.claim-c label {
color: #fff !important;
text-transform: uppercase;
padding-top: 15px;
}
.claim-divider {
border-right: 14px solid #fff;
height: 190px;
margin-top: 9px;
margin-bottom: 9px;
}
.claim-divider2 {
border-right: 14px solid #fff;
height: 232px;
margin-top: 9px;
margin-bottom: 9px;
}
.claimBordercolor {
/* border:10px solid #FFCB00; */
border: 10px solid rgba(12, 64, 28, 0.91);
}
.claim-hdr {
width: 81%;
color: #fff;
text-transform: uppercase;
}
.margin-right20 {
margin-right: 20px;
}
.steppos {
color: #fff;
position: relative;
top: 7px;
font-weight: bold;
}
.orPos {
padding-right: 10px;
}
@media only screen and (max-width: 490px) {
body {
background-color: red;
}
.claim-divider {
border-right: 14px solid #fff;
height: 330px;
margin-top: 9px;
margin-bottom: 9px;
}
.claim-divider2 {
border-right: 14px solid #fff;
height: 582px;
margin-top: 9px;
margin-bottom: 9px;
}
.steppos {
color: #fff;
position: relative;
top: -8px;
font-weight: bold;
}
@media only screen and (min-width: 750px) {
body {
background-color: blue;
}
.claim-divider {
border-right: 14px solid #fff;
height: 330px;
margin-top: 9px;
margin-bottom: 9px;
}
.claim-divider2 {
border-right: 14px solid #fff;
height: 582px;
margin-top: 9px;
margin-bottom: 9px;
}
.steppos {
color: #fff;
position: relative;
top: -8px;
font-weight: bold;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container claim-c">
<div class="row claimBordercolor">
<div class="col-xs-4 col-sm-2 col-md-3 claim-divider">
<h2 class="steps"> <span class="steppos">STEP</span> <span class="circle pull-right">1</span></h2>
</div>
<div class="col-xs-8 col-sm-10 col-md-9">
<h4 style="color:#fff" class="claim-hdr">CURRENT </h4>
<div class="row">
<div class="col-xs-12 col-sm-5 col-md-5">
<label for="name" class="control-label required">SOME SOME Number <i aria-hidden="true" class="fa fa-asterisk"></i>
</label>
<input type="text" placeholder="Enter name" name="name" id="name" class="form-control" vk_1d97d="subscribed">
</div>
<div class="col-xs-12 col-sm-2 col-md-2">
<h2><span class="label label-warning orPos">OR</span></h2>
</div>
<div class="col-xs-12 col-sm-5 col-md-5">
<label for="name" class="control-label ">Some/test s Lotus Number</label>
<input type="text" placeholder="Enter name" name="name" id="name" class="form-control" vk_1d97d="subscribed">
</div>
</div>
</div>
</div>
<div class="row claimBordercolor">
<div class="col-xs-4 col-sm-2 col-md-3 claim-divider2">
<h2 class="steps "> <span class="steppos">STEP</span> <span class='circle pull-right'>2</span></h2>
</div>
<div class="col-xs-8 col-sm-10 col-md-9">
<h4 class="claim-hdr" style="color:#fff"> LoremIpsumorem Ipsum Lorem ipsum lorem ipsum Lorem ipsumLoremipsum lorem ipsum.</h4>
<div class="row">
<div class="col-xs-12 col-sm-5 col-md-5">
<label class="control-label " for="name">Date of Birth(MM/DD/YYYY)</label>
<input class="form-control" id="name" name="name" type="text" placeholder="Enter name" />
<label class="control-label " for="name"> Type</label>
<input class="form-control" id="name" name="name" type="text" placeholder="Enter name" />
</div>
<div class="col-xs-12 col-sm-2 col-md-2">
<h2><span class="label label-warning orPos">OR</span></h2>
</div>
<div class="col-xs-12 col-sm-5 col-md-5">
<label class="control-label " for="name"> Name</label>
<input class="form-control" id="name" name="name" type="text" placeholder="Enter name" />
<label class="control-label " for="name">ZIP </label>
<input class="form-control" id="name" name="name" type="text" placeholder="Enter name" />
</div>
</div>
</div>
</div>
<!-- end of row -->
</div>
</div>
将col-md-4
更改为col-md-6
。
<div class="col-xs-9 col-sm-4 col-md-6 ">
此外,您还有一些colsm
的实例,它们之间没有连字符。
http://codepen.io/ruchiccio/pen/KzbBvB