Question

我正在使用css媒体查询和图像处理以下参考图像上的响应性工作。我试图避免位置我没有得到我需要的精确输出。

这是我的HTML代码

<div class="container-fluid">
    <div class="row-fluid">
        <div class="flw_width">
            <label class="pull-left flw_text green_prog_text">Basic Information</label>
            <div class="col-xs-4 col-sm-4 col-md-1">
                <div class="flw_circle_green">
                    &nbsp;
                </div>
            </div>
            <div class="col-xs-4 col-sm-4 col-md-3">
                <div class="green_prog">
                    &nbsp;
                </div>
            </div>  
            <label class="pull-left flw_text cst_text">Education &amp; Health</label>
            <div class="col-xs-4 col-sm-4 col-md-1">
                <div class="flw_circle_grey">
                    &nbsp;
                </div>
            </div>
            <div class="col-xs-4 col-sm-4 col-md-3">
                <div class="grey_prog">
                    &nbsp;
                </div>
            </div>
            <label class="pull-left flw_text cst_text">Attach &amp; Declaration</label>
            <div class="col-xs-4 col-sm-4 col-md-1">
                <div class="flw_circle_grey">
                    &nbsp;
                </div>
            </div>
            <div class="col-xs-4 col-sm-4 col-md-3">
                <div class="grey_prog">
                    &nbsp;
                </div>
            </div>
            <label class="pull-left flw_text pay_text">Payment</label>
            <div class="col-xs-4 col-sm-4 col-md-1">
                <div class="flw_circle_grey">
                    &nbsp;
                </div>
            </div>
        </div>
    </div>
</div>

我的CSS代码

.flw_width{
   width: 480px;
   margin: 0px auto;
   padding-top:45px;
   padding-bottom: 60px;
 }
 .flw_text{
    font-size: 13px;
    color: #ced3d0;
    font-family: 'Open Sans', sans-serif;
    width: 0px;
    white-space: nowrap;
    margin-top: -35px;
    margin-left: -45px;
    border:0px;
  }

    .flw_text, .cst_text{
    margin-left: -46px !important;
}
.pay_text{
    padding-left:26px;
}
.flw_circle_grey{
    background: url(../images/grey_Circle.jpg) no-repeat;
    width: 20px;
    height: 20px;
    margin-left: -35px;
    margin-top: -7px;
}
.flw_circle_green{
    background: url(../images/green_Circle.jpg) no-repeat;
    width: 20px;
    height: 20px;
    margin-top: -6px;
    margin-left: 0px;
}
.grey_prog{
    background-color: #ced3d0;
    height: 6px;
    margin-left: -24px;
    border: 1px solid #bdbdbd;
}
.green_prog_text{
    color: #84bd00;
}
.green_prog{
    background-color: #84bd00;
    height: 6px;
    margin-left: -24px;

}

我目前的输出是这样的。

这是参考图像。请帮助我，我一直在努力奋斗。

请做好必要的事。

Answer 1

你错误地选择了列网格，我认为对于代表字体的类来说，圆形（绿点）fa fa-circle flw_circle_green可以更改为单个网格，你已经定义了一个4列网格。

尝试将四列网格更新为一列1列并使用

使用css和图像处理响应中的页面流

1 个答案: