css - 使用 css 和图像处理响应式页面流

Question

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

这是我的 Fiddle link

这是我的 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

你错误地选择了列网格，我认为对于代表 Font Awesome 圆(绿点)的类 fa fa-circle flw_circle_green 可以更改为你定义的单个网格4 列网格。

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