Javascript 引导-屏幕缩小时缩小图像大小

我创建了一个简单的布局来显示计时器。这是一个有6张图片的div。我只想随着屏幕的缩小缩小图像的大小。图像总是在一条直线上。我试过这个：

这就是@1280x800的情况：

但它不起作用。它不会根据屏幕大小而缩小。我能做些什么来达到这个结果？谢谢。

编辑好的小提琴是

好的，首先，我们应该将

.col-

直接嵌套在

.row

下面：

<div id="timer-wrap" style="margin-top: 50px;"><!-- `class="row"` removed -->
    <img class="pull-left" src="img/left_arrow.png" id="left_arrow" />
    <div id="timer" class="text-center">
        <div class="row"><!-- added this `div` -->
...

由于Bootstrap的网格首先是移动的，所以较大的屏幕将继承3列大小，除非您覆盖它们

但随后图像与箭头图像重叠。为了纠正这一点，我们将限制

#timer

的宽度，并将其置于

#timer wrap

的中心，如下所示：

#timer {
    width: 80%; /* or whatever works */
    margin: 0 auto;
}

现在，这些图像变得非常小。Bootstrap的网格已经有边沟填充，因此您可能需要删除

填充：10px#定时器img

上的代码>

弄乱

#计时器的宽度应该可以帮助您获得想要的外观。您可能还需要调整非常窄的屏幕的布局

让我知道你还需要什么，我会更新答案。
你试过将图像宽度设置为百分之一吗？图像正在相互合并。这是一把小提琴，它几乎可以告诉我发生了什么：@MohammadAreebSiddiqui好的，看看我更新的答案。让我知道在此之后您遇到了什么问题，我将更新答案以解决这些问题。箭头也可以缩小吗？：）将他们父母的宽度设置为10%左右。这应该是容器或主体大小的1/10。
<div id="timer-wrap" style="margin-top: 50px;"><!-- `class="row"` removed -->
    <img class="pull-left" src="img/left_arrow.png" id="left_arrow" />
    <div id="timer" class="text-center">
        <div class="row"><!-- added this `div` -->
...

            <div class="col-xs-3">
                <img src="img/timer/days.png" />
            </div>
            <div class="col-xs-3">
                <img src="img/timer/hours.png" />
            </div>
            <div class="col-xs-3">
                <img src="img/timer/minutes.png" />
            </div>
            <div class="col-xs-3">
                <img src="img/timer/seconds.png" />
            </div>

#timer {
    width: 80%; /* or whatever works */
    margin: 0 auto;
}