Question

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

基本上，我需要的是屏幕上有可调整大小的项目，当它只有一个项目时，此项目会填满整个空间，当有多个项目时，请调整它们的大小，如下图所示。

我到目前为止的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>

感谢。

Answer 1

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

Bootstrap - 项目的动态大小

1 个答案: