Bootstrap + jQuery：根據屏幕寬度調整圖表大小

Question

我制作了一個根據屏幕width更改大小的圖表（在小提琴中 （很少）創建），但是當我在頁面上使用此代碼時，當我減小屏幕width ，最終的圓/字形會落到下一行，什么時候應該保持在同一行（如小提琴中 ）。

我的小提琴

這是我的代碼：

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%;
}

不知道為什么要注釋掉它，但是當您取消注釋並使用％的值時，它似乎可以解決問題。