gpt4 book ai didi

html - Bootstrap - 元素的动态大小

转载 作者:太空宇宙 更新时间:2023-11-04 01:28:46 25 4
gpt4 key购买 nike

我正在使用 Bootstrap 构建屏幕,但我不知道达到预期结果的正确方法。

基本上,我需要的是在屏幕上有可调整大小的元素,当它只有一个元素时,这个元素填满整个空间,当有多个元素时,平均调整它们的大小,如下图。

Multiple items

Single item

我目前拥有的 HTML:

<body>
<div class="container-fluid nopadding">
<header class="container-fluid header">
<span>MINI RADICAL KART</span>
<section class="floating-buttons-box">
<a class="btn-floating green-gradient play"><img src="assets/imgs/play_button.png" width="12"/></a>
<a class="btn-floating black-gradient add"><img src="assets/imgs/plus_button.png" width="20"/></a>
</section>
</header>

<div class="container-fluid">
<div id="clock" class="col-md-5 timer">
<h2>Kart 01</h2>
<h1 class="time">04:32</h1>
<div class="buttons">
<img src="assets/imgs/pause_button.png" class="stop-button"/>
<img src="assets/imgs/single_play_button.png" class="play-button"/>
</div>
</div>

</div>

</div>


<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<!-- Countdown JavaScript -->
<script type="text/javascript" src="js/jquery.countdown.js"></script>

<script type="text/javascript">
var fiveSeconds = new Date().getTime() + 5000;
$('#clock').countdown(fiveSeconds, {elapse: true})
.on('update.countdown', function(event) {
$(".time").text(event.strftime('%M:%S'));
if (event.elapsed) {
$(".time").removeClass("green");
$(".time").addClass("red");
} else {
$(".time").removeClass("red");
$(".time").addClass("green");
}
});

$('.stop-button').click(function() {
$('div#clock').countdown('pause');
});

$('.play-button').click(function() {
$('div#clock').countdown('resume');
});
</script>

</body>

谢谢。

最佳答案

here is what you want - 你必须使用 display: flex;

关于html - Bootstrap - 元素的动态大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47479951/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com