Question

我正在创建一个包含图表/图像等的管理面板。

我没有做出回应。

所有图片都是svg，我使用charts.js框架来创建饼图。

这是我有一个div的例子

这是html：

<div class="row">
    <div class="col-md-6">
        <div class="alerts-chart-wrapper">
            <canvas id="alertsChart" style="float: left;"></canvas>
        </div>
    </div>
    <div class="col-md-6">
        <div class="row alert-row">
            <div class="entitys-icons icon-1"> </div>
            <div class="alert-entity-name"> Users </div>
            <div class="entity-alerts-count">28</div>
        </div>
        ...(3 more rows)
    </div>
</div>

css：

.alert-row {
    padding: 0% 15% 3% 5%;
}

.entitys-icons {
    background: url('/Areas/WebApp/app/main_page_assets/02_general_alerts_icons.svg');
    background-repeat: no-repeat;
    width: 33px;
    height: 33px;
    background-size: 77px;
    float: left;
}

.entitys-icons.icon-1 {
    background-position: 0 2px;
}

.alert-entity-name {
    float: left;
    font-size: 0.75em;
    vertical-align: middle;
    line-height: 35px;
    padding-left: 2px;
}

.entity-alerts-count {
    float: right;
    vertical-align: middle;
    line-height: 35px;
    padding-left: 2px;
}

.alerts-chart-wrapper {
    width: 100%;
}

现在问题是圆圈的增长和缩小取决于分辨率，但行不是。

以下是宽度缩小时的问题的屏幕截图（第一行和第三行必须对齐）：

这里使用的策略是什么？我想也许我会使用固定大小的媒体，但对我来说最好的解决方案是行高会相应改变。

Answer 1

在head标记内，配置右视口

var

Answer 2

您必须使用其他网格选项指定尺寸作为屏幕更改分辨率。

http://getbootstrap.com/css/#grid

对于移动设备，您需要使用.col-sm-前缀。

<div class="row">
    <div class="col-md-6 col-sm-12">
        <div class="alerts-chart-wrapper">
            <canvas id="alertsChart" style="float: left;"></canvas>
        </div>
    </div>
    <div class="col-md-6 col-sm-12">
        <div class="row">
            <div class="col-sm-6 alert-row">
               <div class="entitys-icons icon-1"> </div>
               <div class="alert-entity-name"> Users </div>
               <div class="entity-alerts-count">28</div>
            </div>
            ...(3 more **col**)
        </div>
    </div>
</div>

使用复杂对象创建响应式div

2 个答案: