Bootstrap + jQuery：根据屏幕宽度调整图表大小

Question

我制作的图表根据屏幕width（在小提琴中重新创建（很差））更改了其大小，但是当我在页面上使用此代码时，最后一个圆圈当我减少屏幕width时，/ glyph会落在下一行，当它应该保持在同一条线上时（如小提琴）。

My fiddle

这是我的代码：

HTML

<div class="glyphicon-belt">

        <div id="rectangle"></div>

        <div class="container circle-container circle-1">
            <i class="icon-steak" style="font-size: 60px"></i>
        </div>

        <div class="container circle-container circle-2">
            <i class="icon-brain" style="font-size: 60px"></i>
        </div>

        <div class="container circle-container circle-3">
            <i class="icon-happy" style="font-size: 60px"></i>
        </div>

</div>

CSS

.circle-container {
    background-color: #FDA220;
    width: 100px;
    height: 100px;
    border-radius: 100px;
    text-align: center;
    display: inline-block;
    line-height: 100px;
    margin-top: -60px;
}

.glyphicon-belt {
    width: 50%;
    left: 25%;
    position: absolute;
    text-align: center;
  margin-top: 100px;
//  background-color: black;
}

#rectangle {
    width: 80%;
    margin-left: 10%;
    height: 20px;
    background: #E7292A;
}

.circle-1 {
    margin-right: 26%;
}

.circle-2 {
    margin-right: 26%;
}

.circle-3 {
//  margin-right: -5%;
}

.glyph-connect {
//  left-margin: 25%;
    text-align: center;
    padding: 0px;
    background-color: black;
}

的jQuery

var screen = $(window).width();
var fontRatio = 60 / screen;
var circleRatio = 100 / screen;
var barRatio = 20 / screen;

$(window).on('resize', function() {
    var screen = $(window).width();
    var fontSize = screen * fontRatio;
    var circleSize = screen * circleRatio;
    var lineHeight = circleSize + "px";
    var barHeight = screen * barRatio

    $(".icon-steak").css("font-size", fontSize);
    $(".icon-brain").css("font-size", fontSize);
    $(".icon-happy").css("font-size", fontSize);

    $(".circle-container").css("width", circleSize);
    $(".circle-container").css("height", circleSize);
    $(".circle-container").css("line-height", lineHeight);

    $("#rectangle").css("height", barHeight);
});

Answer 1

如果我理解你的问题并使用它，看起来你需要修复circle-3：

.circle-3 {
  margin-right: 1%;
}

不确定为什么你注意到它，但是当你取消注释它并使用％的时候它似乎可以解决问题。