如何水平对齐此菜单

时间:2017-03-12 15:04:26

标签: jquery html css twitter-bootstrap-3

大家好日子,

我已经调试了好几个小时了。当我希望它显示为水平时,它会正常显示。

我缺少什么?

下面是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;
&#13;
&#13;

3 个答案:

答案 0 :(得分:2)

删除包含div中的class="row" 并在你的CSS中删除以下内容:

.signUpStep {
    width: 100%
}

Bootply:http://www.bootply.com/1qMqaa5TTE

答案 1 :(得分:0)

您在代码中指定的宽度,即100%占用特定div的整个位置,这就是为什么每个div看起来都是一行而不是完整的div是单行。 更具体地说

.signUpstep {    。    。    宽度:100%;
   。    。 }

使宽度等效大小以使其适合行。数学上100%/(行数)

答案 2 :(得分:0)

添加此CSS以更改菜单元素的属性:

.row > div {
    display: inline-block;
    float: none;
    width: inherit;
}

https://jsfiddle.net/wrunnvqa/1/