Html 引导：使字形图按屏幕大小缩放

我正在设计一个由形状和字形组成的图表（因为没有更好的词），我希望它能随着屏幕大小而改变大小。我已经尽了最大的努力来重现这是一把小提琴（见下图）。当你改变屏幕的大小时，一些圆圈溢出到下一行，当我希望整个图表缩小时（就像在流体容器中一样）

使用JavaScript根据窗口宽度和高度设置字体大小。我已经成功了，但当我将宽度减得太大时，第三个圆圈仍会换行。你知道为什么会这样吗？我知道了。你能提供工作的小提琴吗？沿着这条线的东西会从样式中删除这个

。圈-1{margin right:17%；}

，并添加边距right作为内联样式，就像你在注释中在小提琴中添加高度、宽度一样。

<div class="glyphicon-belt">
    <div id="rectangle"></div>

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

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

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