大家好日子,
我已经调试了好几个小时了。当我希望它显示为水平时,它会正常显示。
我缺少什么?
下面是html,css,bootstrap和jquery代码。
由于
段:
$("span#general-signup").appendTo( ".done" );

#activeStep{
background: #007ee5;
color: #fff;
}
#completedStep{
color: #888;
}
.signUpStep {
position: relative;
float: left;
background-color: #fafafa;
height: 42px;
width: 100%;
margin: 0;
overflow: hidden;
color: #007ee5;
}
.stepNumb {
float: left;
font-size: 34px;
line-height: 1em;
font-weight: 300;
}
.stepInfo {
margin-left: 22px;
line-height: 16px;
font-size: 17px;
padding-top: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<span id="general-signup" class="pull-right"><i class="fa fa-check fa-2x " style="color: #99ff00;" aria-hidden="true"></i></span>
</div>
<div class="row">
<div id="completedStep" class="col-md-2 col-xs-6 col-sm-4 signUpStep">
<div class="stepNumb">1</div>
<div class="stepInfo done">Basic Info </div>
</div>
<div id="completedStep" class="col-md-2 col-xs-6 col-sm-4 signUpStep">
<div class="stepNumb">2</div>
<div class="stepInfo done">Education</div>
</div>
<div id="completedStep" class="col-md-2 col-xs-6 col-sm-4 signUpStep">
<div class="stepNumb">3</div>
<div class="stepInfo done">Experience</div>
</div>
<div class="col-md-2 col-xs-6 col-sm-4 signUpStep">
<div class="stepNumb">4</div>
<div class="stepInfo">Schedule</div>
</div>
<div class="col-md-2 col-xs-6 col-sm-4 signUpStep">
<div class="stepNumb">5</div>
<div class="stepInfo">Social</div>
</div>
<div id="completedStep" class="col-md-2 col-xs-6 col-sm-4 signUpStep">
<div class="stepNumb">6</div>
<div class="stepInfo done">Referral</div>
</div>
</div>
&#13;
答案 0 :(得分:2)
删除包含div中的class="row"
并在你的CSS中删除以下内容:
.signUpStep {
width: 100%
}
答案 1 :(得分:0)
您在代码中指定的宽度,即100%占用特定div的整个位置,这就是为什么每个div看起来都是一行而不是完整的div是单行。 更具体地说
.signUpstep {
。
。
宽度:100%;
。
。
}
使宽度等效大小以使其适合行。数学上100%/(行数)
答案 2 :(得分:0)
添加此CSS以更改菜单元素的属性:
.row > div {
display: inline-block;
float: none;
width: inherit;
}